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

amazeui学习笔记--css(常用组件6)--图标Icon的更多相关文章

  1. amazeui学习笔记--css(常用组件14)--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  2. amazeui学习笔记--css(常用组件11)--分页Pagination

    amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...

  3. amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb

    amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...

  4. amazeui学习笔记--css(常用组件16)--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  5. amazeui学习笔记--css(常用组件15)--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  6. amazeui学习笔记--css(常用组件13)--进度条Progress

    amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...

  7. amazeui学习笔记--css(常用组件12)--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  8. amazeui学习笔记--css(常用组件10)--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  9. amazeui学习笔记--css(常用组件9)--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

随机推荐

  1. CentOS桥接网卡配置

    网桥方式配置步骤 1.增加网桥设备br0 vi /etc/sysconfig/network-scripts/ifcfg-br0 DEVICE=br0 ONBOOT=yes TYPE=Bridge B ...

  2. SpringBoot与SpringCloud的区别

    1.Spring boot 是 Spring 的一套快速配置脚手架,可以基于spring boot 快速开发单个微服务:Spring Cloud是一个基于Spring Boot实现的云应用开发工具: ...

  3. HDU 2883 kebab

    kebab Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 2883 ...

  4. 模板实参推导 & xx_cast的实现

    首先,类模板必须被显式特化.当然了,可以通过一个辅助函数,通过参数类型,返回特化的类模板,来间接处理. 这个技术被广泛应用在ptr_fun, make_pair, mem_fun, back_inse ...

  5. ASPNET 页面编码

    转自:http://www.cnblogs.com/libingql/archive/2009/04/11/1433771.html 设置ASPNET页面编码格式 1.Web.Config设置 < ...

  6. javafx ComboBox Event and change cell color

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...

  7. 今日题解------codeforce 893d

    题意:给你一个数列,小于零表示表示信用卡里取出钱,大于零表示信用卡里存钱,等于零表示要查询信用卡, 如果被查到信用卡里的钱小于零,那你就GG,或者在任何时候你的信用卡里的钱大于d的话(不需要找ai等于 ...

  8. 免费超大量邮件发送服务Amazon SES和Mailgun提供SMTP和API支持

    一般来说网站注册.论坛消息.新闻推送.广告宣传等都会有发送邮件服务,大量的邮件发送服务如果用PHP来发送,一是会消耗主机资源,二是容易被各大邮箱判定为垃圾邮件而被拒收.用第三方的邮局服务发送邮件,可以 ...

  9. 学习WWDC的好资源!

    学习WWDC的好资源. 大家都知道.要看Apple每年一度的WWDC,仅仅要到它的Developer站点去就能够了.那里有每年的研讨会视频,并且还能够下载每一个视频的SD或HD视频文件,以及相关的演示 ...

  10. 【Android】利用安卓的数据接口、多媒体处理编写内存卡Mp3播放器app

    通过调用安卓的MediaPlayer能够直接完毕Mp3等主流音频的播放,同一时候利用ContentResolver与Cursor能够直接读取安卓内在数据库的信息.直接获取当前sdcard中全部音频的列 ...