参考 http://fontawesome.dashgame.com/

1 大图标递进
  fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x,或者 fa-5x
 
2 固定宽度
  fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况
 
3 用于列表
  使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。
 
4 边框与对齐
  用 fa-border 以及 pull-right 或 pull-left 可以轻易构造出引用的特殊效果。
  <i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
 
5 动画
  fa-spin 类来使任意图标旋转
  fa-pulse 来使其进行8方位旋转
  尤其适合fa-spinner、fa-refresh 和 fa-cog
 
6 翻转与旋转
  使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。
  fa-rotate-90  fa-rotate-180 fa-rotate-270
  fa-flip-horizontal  fa-flip-vertical
 
7 组合使用 想要将多个图标组合起来,
  使用 fa-stack 类作为父容器,
  fa-stack-1x 作为正常比例的图标,
  fa-stack-2x 作为大一些的图标。
  fa-inverse 类来切换图标颜色。
  您可以在父容器中 通过添加 大图标 类来控制整体大小。
  <span class="fa-stack fa-lg">
      <i class="fa fa-camera fa-stack-1x"></i>
      <i class="fa fa-ban fa-stack-2x text-danger fa-inverse"></i>
  </span>
 

Font Awesome 图标使用总结的更多相关文章

  1. CSS 中Font Awesome 图标(附码表)

    HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 传送门:http://fontawesome.das ...

  2. Font Awesome图标库

    Font Awesome 是一个非常方便的图标库.这些图标都是矢量图形,被保存在 .svg 的文件格式中.这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小 ...

  3. icon font字体图标字库汇总

    最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...

  4. Font Awesome:图标字体,完全CSS控制

    Font Awesome是一种web font,它包含了几乎所有常用的图标,比如Twitter.facebook等等.用户可以自定义这些图标字体,包括大小.颜色.阴影效果以及其它可以通过CSS控制的属 ...

  5. font awesome (图标字体库)

    Font Awesome fa是什么? 图标字体库和CSS框架 怎么用? <link rel="stylesheet" href="https://cdn.boot ...

  6. Font Awesome 图标如何使用

    Font Awesome 图标如何使用 一.总结 一句话总结:Font Awesome字体图标非常好用,直接引入font-awesome.css,然后就可以直接使用了,使用的时候是用的i标签. 1.字 ...

  7. Font Awesome图标字体应用及相关

    作为web开发者,难免要经常要用到些小图标,给自己web增添几分活力和多样性.像这些: 而Font Awesome刚好为我们提供了这些.到目前为止,Font Awesome提供了有500多个可缩放的的 ...

  8. 如何在HTML5 Canvas 里面显示 Font Awesome 图标

        Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用. 提供的CSS 已经可以完美显示这些图标在网页里面.最新的版本4.3 里面,已经提供519 Icon ...

  9. Font Awesome图标字体库(2015年05月25日)

    Font Awesome是一款非常棒的字体图标工具,给个地址,具体的自已慢慢去体会,只能帮你到这儿了...... http://fortawesome.github.io/Font-Awesome/ ...

  10. 在WPF应用程序中使用Font Awesome图标

    Font Awesome 在网站开发中,经常用到.今天介绍如何在WPF应用程序中使用Font Awesome . 如果是自定义的图标字体,使用方法相同. 下载图标字体 在官方网站或github上下载资 ...

随机推荐

  1. ETL全量单表同步简述

    ETL全量单表同步简述 1. 实现需求 当原数据库的表有新增.更新.删除操作时,将改动数据同步到目标库对应的数据表. 2. 设计思路 设计总体流程图如下: 注意点: 1.数据库合并时,选择正确的数据源 ...

  2. Serv-u 10.3 的图文安装教程及使用方法

    现在很多windows服务器都是使用serv_u作为ftp服务器,一般情况下我们使用Serv-U FTP Server v6.4.0.6,这里以serv_u 10.3为例介绍下,方便需要的朋友   一 ...

  3. canvas 插件

    http://www.jq22.com/yanshi2217 参考这个站 发现一些比较有用的canvas插件: 线形图插件:jquery.sparkline 2.1.1 excanvas 环形图,饼状 ...

  4. 使用Java快速开发博客、官网等偏内容型网站-IDEA篇-MCMS

    分享快乐 由于官网提供的是eclipse的教学视频,清晰度感人,看得我就一个纳闷,反复的看,反复检查,就是不行,然后天真的寻觅帮助,反复查看文档依旧凉凉.最后放弃,转战idea.特此篇,希望能帮助到各 ...

  5. pipenv 的使用

    pipenv 的使用 学习了:https://blog.csdn.net/chroming/article/details/77104873?locationNum=4&fps=1 https ...

  6. 程序员之---C语言细节18(一些奇怪表达式)

    主要内容:一些奇怪表达式 #include <stdio.h> #define N 10 int main() { int a = 1; int *q = &a; int p = ...

  7. web网站架构演变过程

    我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理 阶段一. ...

  8. easyui中点击datagrid的分页刷新按钮,数据无法更新到最新状态

    原因分析:点击刷新按钮是对当前页数据进行reload,因此所传的请求参数皆为上一次加载当前页的参数即datagrid的load方法中的参数,主要是因为请求的最终时间无法更新到最新状态 解决方案:对点击 ...

  9. 数据结构 - 希尔排序(Shell&#39;s Sort) 具体解释 及 代码(C++)

    数据结构 - 希尔排序(Shell's Sort) 具体解释 及 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy/article/details/2 ...

  10. redis集群在window下安装

    1.下载安装单机版:  https://github.com/MSOpenTech/redis/releases/download/win-3.2.100/Redis-x64-3.2.100.msi ...