amazeui学习笔记--css（常⽤组件6）--图标Icon amazeui学习笔记--css（常⽤组件6）--图标Icon ⼀、总结
1、关注⽤法即可：在 HTML 上添加添加am-icon-{图标名称} class。<span class="am-icon-weixin"> Wechat</span>
2、图标⼤⼩：
.am-icon-sm，放⼤ 150%
.am-icon-md，放⼤ 200%
.am-icon-lg，放⼤ 250%
3、icon button：在 Icon 上添加.am-icon-btn class。<a href="##" class="am-icon-btn am-icon-twitter"></a>
4、旋转动画：注意：Chrome 和 Firefox 下，display: inline-block；或display: block；的元素才会应⽤旋转动画。<i class="am-icon-spinner am-icon-spin"></i>
5、固定宽度（⾮常有⽤）：FontAwesome 在绘制图标的时候不同图标宽度有差异，添加.am-icon-fw将图标设置为固定的宽度，解决宽度不⼀致问题（v2.3 新增）。<li><i class="am-icon-qq am-icon-fw"></i> QQ</li>
6、图标不⽀持的情况可以直接写编码形式：<span> What a fuck.</span>
⼆、图标Icon
Icon
⽬录
Amaze UI Icon 组件⽬前使⽤了（Amaze UI 2.2.0 中升级⾄ 4.3.0），涵盖除部分国内社交⽹站图标以外的其他常见图标。
使⽤⽅法
添加 Class
在 HTML 上添加添加am-icon-{图标名称} class。
Copy
QQ Wechat
手机打开svg<span class="am-icon-qq"> QQ</span>
<span class="am-icon-weixin"> Wechat</span>
使⽤ Mixin
LESS ⽤户可以调⽤ mixin 编写样式：
1. 在要设置 Icon 的元素⾥调⽤.am-icon-font mixin 设置字体；
2. content设置为 Icon 名称对应的变量content: @fa-var-{图标名称}。
Copy
新浪微博
<span class="doc-icon-custom"> 新浪微博</span>
Copy
.doc-icon-custom {
&:before {
.am-icon-font;
content: @fa-var-weibo;
}
}
修改字体路径
字体图标⽬前引了上的⽂件（⽀持 HTTPS），可以⾃⾏替换：编译好的 CSS 中已经替换为本地⽂件。
使⽤ LESS：通过设置变量@fa-font-path覆盖默认的值，如@fa-font-path: "../fonts";。这个变量定义在icon.less⾥。
直接使⽤ CSS：查替换///font-awesome/4.2.0/fonts/。
图标⼤⼩
.am-icon-sm，放⼤ 150%
.am-icon-md，放⼤ 200%
.am-icon-lg，放⼤ 250%
Copy
默认⼤⼩
.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 button
在 Icon 上添加.am-icon-btn class。
如果需要设置 Icon Button 的颜⾊，可以添加以下 class：
.am-primary
.am-secondary
.am-success
.am-warning
.am-danger
Copy
<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；的元素才会应⽤旋转动画。
Copy
<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 新增动画：
Copy
<i class="am-icon-spinner am-icon-pulse"></i>
固定宽度
FontAwesome 在绘制图标的时候不同图标宽度有差异，添加.am-icon-fw将图标设置为固定的宽度，解决宽度不⼀致问题（v2.3 新增）。 Copy
QQ
Skype
GitHub
Amex
<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按钮复制结果为
Copy
{
.am-icon-font;
content: @fa-var-copy;
}
存在问题
关于部分奇葩⽤户代理不显⽰字体图标
2016.07.11 update:
经，某些安卓⼿机（如酷派某些型号）不显⽰字体图标，原因出在@font-face中引⼊了svg格式的字体，这些机型解析时出错，即便包含其他格式的字体，也⽆法正确显⽰。
解决⽅法是删除svg格式字体的引⽤，svg格式提供给，删除并⽆负⾯影响。Amaze UI 2.7.1中已经。
以酷派为代表的部分安卓⼿机⾃带浏览器、/QQ WebView 等⽤户代理⽆法正常显⽰ Icon Font，原因可能是这些⽤户代理⽆法正确处理伪元素content的五位数的 Icon Font ⼗六进制编码，详情参考，可以通过进⾏测试。
解决⽅式有两种：
将 Icon Font 编码限制在 4 位：Amaze UI 直接使⽤ Font Awesome，不可能去调整近 500 个图标的编码。
将 Icon Font 的编码直接以内容的形式写进 HTML。
Copy
What a fuck.
<span> What a fuck.</span>
Amaze UI 的定位是⾯向现代浏览器，虽然对 IE 8/9 这些浏览器提供了有限⽀持，但这都是在不改变基础架构、不耗费过多精⼒的前提下。
安卓碎⽚化严重，更恶⼼的是⼀些⼚商还随意修改浏览器内核，Amaze UI 不可能做到全部兼容，也不可能为极个别的⽤户代理调整架构、耗费过多精⼒。
云适配内部有数千个⽹站在使⽤ Amaze UI，截⽌⽬前还没有接到过图标不显⽰的反馈。显然，遇到这些问题的⽤户需要权衡处理这个问题的成本与收益。
v2.3 update:
有⽤户在评论中说以下写法可以解决图标不显⽰的问题，v2.3中已经调整为以下写法，遇到过问题的⽤户可以测试⼀下。
Copy
/* 安卓⼿机端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;
}
所有图标列表
Font Awesome 4.6 新增字体（Amaze UI 2.7 中搭载）
Font Awesome 4.5 新增字体（Amaze UI 2.5 中搭载）
Font Awesome 4.4 新增字体（Amaze UI 2.5 中搭载）
Font Awesome 4.3 新增字体（Amaze UI 2.2 中搭载）
40 New Icons in 4.2
Web Application Icons
File Type Icons
Spinner Icons
These icons work great with the am-icon-spin class. Check out the .
Form Control Icons
Payment Icons
Chart Icons
Currency Icons
Text Editor Icons
Directional Icons
Video Player Icons
Brand Icons
All brand icons are trademarks of their respective owners.
The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
Warning!
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please  if you believe this to be an error. To work around this, you'll need to modify the social icon class names. Medical Icons
Issue 列表

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。