amazeui学习笔记--css（常用组件6）--图标Icon

2022-06-13 11:33:02

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>&#xf09b; What a fuck.</span>

二、图标Icon

Icon

Amaze UI Icon 组件目前使用了 Font Awesome（Amaze UI 2.2.0 中升级至 4.3.0），涵盖除部分国内社交网站图标以外的其他常见图标。

使用方法

添加 Class

在 HTML 上添加添加 am-icon-{图标名称} class。

 Copy
QQ Wechat
<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;

  }

}

修改字体路径

字体图标目前引了 Staticfile CDN 上的文件（支持 HTTPS），可以自行替换：编译好的 CSS 中已经替换为本地文件。

  • 使用 LESS： 通过设置变量 @fa-font-path 覆盖默认的值，如 @fa-font-path: "../fonts";。这个变量定义在 icon.less 里。
  • 直接使用 CSS： 查找替换 //dn-staticfile.qbox.me/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 格式提供给 iOS Safari 4.1- 使用，删除并无负面影响。Amaze UI 2.7.1 中已经做删除处理。

以酷派为代表的部分安卓手机自带浏览器、微信/QQ WebView 等用户代理无法正常显示 Icon Font，原因可能是这些用户代理无法正确处理伪元素 content 的五位数的 Icon Font 十六进制编码，详情参考 Iconfont 在移动端遇到问题的探讨，可以通过这个页面进行测试。

解决方式有两种：

  • 将 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 spinning icons example.

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 report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.

Medical Icons

上一篇：ios专题 - 异步下载加下载进度显示


下一篇：FizzBuzzWhizz问题python解法