浏览器默认样式统一,基础样式,网格,表格、表单、按钮及常用组件样式。
字体图标目前引了 Staticfile CDN 上的文件(支持 HTTPS),可以自行替换:编译好的 CSS 中已经替换为本地文件。
@fa-font-path
覆盖默认的值,如 @fa-font-path: "../fonts";
。这个变量定义在 icon.less
里。//dn-staticfile.qbox.me/font-awesome/4.2.0/fonts/
。.am-icon-sm
,放大 150%.am-icon-md
,放大 200%.am-icon-lg
,放大 250%默认大小
.am-icon-sm
.am-icon-md
.am-icon-lg
<p><span class="am-icon-home"></span> 默认大小</p>
<p><span class="am-icon-home am-icon-sm"></span> .am-icon-sm</p>
<p><span class="am-icon-home am-icon-md"></span> .am-icon-md</p>
<p><span class="am-icon-home am-icon-lg"></span> .am-icon-lg</p>
在 Icon 上添加 .am-icon-btn
class。
如果需要设置 Icon Button 的颜色,可以添加以下 class:
.am-primary
.am-secondary
.am-success
.am-warning
.am-danger
<a href="##" class="am-icon-btn am-icon-twitter"></a>
<a href="##" class="am-icon-btn am-icon-facebook"></a>
<a href="##" class="am-icon-btn am-icon-github"></a>
<a href="##" class="am-icon-btn am-primary am-icon-qq"></a>
<a href="##" class="am-icon-btn am-secondary am-icon-drupal"></a>
<a href="##" class="am-icon-btn am-success am-icon-shield"></a>
<a href="##" class="am-icon-btn am-warning am-icon-warning"></a>
<a href="##" class="am-icon-btn am-danger am-icon-youtube"></a>
注意:Chrome 和 Firefox 下, display: inline-block;
或 display: block;
的元素才会应用旋转动画。
<i class="am-icon-spinner am-icon-spin"></i>
<i class="am-icon-refresh am-icon-spin"></i>
<i class="am-icon-circle-o-notch am-icon-spin"></i>
<i class="am-icon-cog am-icon-spin"></i>
<i class="am-icon-gear am-icon-spin"></i>
v2.3 新增动画:
<i class="am-icon-spinner am-icon-pulse"></i>
FontAwesome 在绘制图标的时候不同图标宽度有差异, 添加 .am-icon-fw
将图标设置为固定的宽度,解决宽度不一致问题(v2.3 新增)。
<ul>
<li><i class="am-icon-qq am-icon-fw"></i> QQ</li>
<li><i class="am-icon-skype am-icon-fw"></i> Skype</li>
<li><i class="am-icon-github am-icon-fw"></i> GitHub</li>
<li><i class="am-icon-cc-amex am-icon-fw"></i> Amex</li>
</ul>
鼠标移到图标上会显示两个小按钮:
class
: 复制 class 名称,用于可修改 DOM 结构的场景,如点击 copy
图标旁的 class
按钮复制结果为 am-icon-copy
;style
: 复制 Icon 样式,用于无法修改 DOM 结构通过样式添加 Icon 的场景,如点击 copy
图标旁的 style
按钮复制结果为2016.07.11 update:
经网友测试研究,某些安卓手机(如酷派某些型号)不显示字体图标,原因出在 @font-face
中引入了 svg
格式的字体,这些机型解析时出错,即便包含其他格式的字体,也无法正确显示。
解决方法是删除 svg
格式字体的引用,svg
格式提供给 iOS Safari 4.1-
使用,删除并无负面影响。Amaze UI 2.7.1
中已经做删除处理。
以酷派为代表的部分安卓手机自带浏览器、微信/QQ WebView 等用户代理无法正常显示 Icon Font,原因可能是这些用户代理无法正确处理伪元素 content
的五位数的 Icon Font 十六进制编码,详情参考 Iconfont 在移动端遇到问题的探讨,可以通过这个页面进行测试。
解决方式有两种:
<span> What a fuck.</span>
Amaze UI 的定位是面向现代浏览器,虽然对 IE 8/9 这些浏览器提供了有限支持,但这都是在不改变基础架构、不耗费过多精力的前提下。安卓碎片化严重,更恶心的是一些厂商还随意修改浏览器内核,Amaze UI 不可能做到全部兼容,也不可能为极个别的用户代理调整架构、耗费过多精力。
云适配内部有数千个网站在使用 Amaze UI,截止目前还没有接到过图标不显示的反馈。显然,遇到这些问题的用户需要权衡处理这个问题的成本与收益。
v2.3 update:
有用户在评论中说以下写法可以解决图标不显示的问题,v2.3
中已经调整为以下写法,遇到过问题的用户可以测试一下。
/* 安卓手机端Icon不能正确显示的处理办法:*/
[class*='am-icon-']:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
am-icon-spin
class. Check out the spinning icons example.