FontAwesome字体使用说明


关键词

字体 Font-Awesome 使用说明

摘要

本文介绍一款很漂亮的字体——Font Awesome,它的是一款Web字体,可以在网页上自由变换图标、大小、颜色,甚至可以做动画、旋转等高大上操作。

Font Awesome使用说明:


1、将font-awesome字体目录放到网站css下面

2、引用字体,用css的方式引用进来
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">


3、使用演示

3.1 常规使用,换图标、换大小、换颜色
<i class="fa fa-user fa-5x" style="color:red;"></i>
语法格式为:class="fa fa-user fa-5x" style="color:red;"
fa,表示引入font-awesome字体
fa-user,图标名称,表示一个“用户”
fa-5x,5倍标准大小

3.2 两个图标叠加
<span class="fa-stack fa-lg">
    <i class="fa fa-user fa-stack-1x" style="color:green;"></i>
    <i class="fa fa-ban fa-stack-2x" style="color:red;"></i>
</span>

3.3 固定宽度
可以让一个组的图标,宽度一致
<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

3.4 替换列表的图标
使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>


3.5 动画
使用 fa-spin 类来使任意图标旋转,现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

3.6 旋转
使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
                    
3.7 其它
其它功能,请参照官方网站
                    
4、参考网址
http://fontawesome.dashgame.com/

 

文章的版权

洪哥写文章很苦逼,如果本文对您略有帮助,点击感兴趣的广告支持洪哥!万分感谢!本文属于“洪哥笔记”原创文章,转载请注明来源地址:FontAwesome字体使用说明:http://www.splaybow.com/post/font-awesome.html

关注与收藏

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


« FontAwesome字体的百度cdn地址 xiaocms代码调用 »