Font Awesome 图标使用总结
参考 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 图标使用总结的更多相关文章
- CSS 中Font Awesome 图标(附码表)
HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 传送门:http://fontawesome.das ...
- Font Awesome图标库
Font Awesome 是一个非常方便的图标库.这些图标都是矢量图形,被保存在 .svg 的文件格式中.这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小 ...
- icon font字体图标字库汇总
最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...
- Font Awesome:图标字体,完全CSS控制
Font Awesome是一种web font,它包含了几乎所有常用的图标,比如Twitter.facebook等等.用户可以自定义这些图标字体,包括大小.颜色.阴影效果以及其它可以通过CSS控制的属 ...
- font awesome (图标字体库)
Font Awesome fa是什么? 图标字体库和CSS框架 怎么用? <link rel="stylesheet" href="https://cdn.boot ...
- Font Awesome 图标如何使用
Font Awesome 图标如何使用 一.总结 一句话总结:Font Awesome字体图标非常好用,直接引入font-awesome.css,然后就可以直接使用了,使用的时候是用的i标签. 1.字 ...
- Font Awesome图标字体应用及相关
作为web开发者,难免要经常要用到些小图标,给自己web增添几分活力和多样性.像这些: 而Font Awesome刚好为我们提供了这些.到目前为止,Font Awesome提供了有500多个可缩放的的 ...
- 如何在HTML5 Canvas 里面显示 Font Awesome 图标
Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用. 提供的CSS 已经可以完美显示这些图标在网页里面.最新的版本4.3 里面,已经提供519 Icon ...
- Font Awesome图标字体库(2015年05月25日)
Font Awesome是一款非常棒的字体图标工具,给个地址,具体的自已慢慢去体会,只能帮你到这儿了...... http://fortawesome.github.io/Font-Awesome/ ...
- 在WPF应用程序中使用Font Awesome图标
Font Awesome 在网站开发中,经常用到.今天介绍如何在WPF应用程序中使用Font Awesome . 如果是自定义的图标字体,使用方法相同. 下载图标字体 在官方网站或github上下载资 ...
随机推荐
- 基于图片识别服务的IOS图片识别程序
由于TensorFlow提供的IOS版Demo相对于Android版识别率不高,所以开发了通过识别服务进行图片识别的IOS版程序. 该程序基于图片识别服务(http://www.cnblogs.com ...
- linux network name space
linux network namespace概念类似于网络中的 VRF (virtual routing and forwarding).但是,你不知道VRF的概念也没关系,下面我们通过一个简单的介 ...
- paramiko错误信息:Paramiko error: size mismatch in put
在使用paramiko的put往远处服务器上传资源的时候,出现类似下面的错误信息 The code in paramiko's sftp_client.py:putfo() reads at the ...
- android中单元測试中的断言assert的使用与扩展
首先看一组对照,比方说我们要測试的结果是一个Linearlaout AssertJ Android: assertThat(layout).isVisible() .isVertical() .has ...
- Android中通过反射来设置Toast的显示时间
这个Toast的显示在Android中的用途还是非常大的,同一时候我们也知道toast显示的时间是不可控的.我们仅仅能改动他的显示样式和显示的位置,尽管他提供了一个显示时间的设置方法.可是那是没有效果 ...
- div拖拽缩放jquery插件编写——带8个控制点
项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...
- jquery選取所有checkbox和判斷是否全部checkbox已經被勾選
前言 勾選/取消勾選 全部勾選checkbox的時候 勾選/取消勾選 所有對應的checkbox 當所有對應checkbox有別勾選的時候, 全部勾選checkbox 也要被勾選 完整程式碼範例 前言 ...
- C++ - 使用copy函数打印容器(container)元素
使用copy函数打印容器(container)元素 本文地址: http://blog.csdn.net/caroline_wendy C++能够使用copy函数输出容器(container)中的元素 ...
- 量化分析师的Python日记【第1天:谁来给我讲讲Python?】
量化分析师的Python日记[第1天:谁来给我讲讲Python?]薛昆Kelvin优矿 001 号员工2015-01-28 15:48 58 144克隆 ###“谁来给我讲讲Python?” 作为无基 ...
- 【WinHec启发录】透过Windows 10技术布局,谈微软王者归来
每一个时代都有王者,王者的成功,往往是由于恰逢其时地公布了一个成功的产品(具有里程碑意义,划时代的产品).Windows 95的成功标示着微软是PC时代的王者:WinXP的成功标示着微软是互联网时代的 ...