Font Awesome 图标字体使用教程

低调G
2020-06-11 / 0 评论 / 1,219 阅读 / 正在检测是否收录...



Font Awesome


Font Awesome 是为 Twitter Bootstrap 设计的图标字体,通过Web Font的方式来显示一些图标,好处是图标可以被任意缩放、改变颜色,你需要做的只是像修改文字样式那样修改图标样式,现在非常多的网站还有博客都是使用的这套图标。

基本使用


1.在站点的在head处引入官方的font-awesome.min.css

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

 
2.其他博客或者网站就在你的header头部引入就可以了
3.Handsome主题直接在:设置外观-开发者设置-自定义输出header头部的HTML代码
4.引入完成,就去这个图标库里去找你想要的图标     图标库
然后复制下来这串代码,然后就可以把这个 i 标签放在任何位置。
5.举个栗子 比如我要在我博客右侧的统计信息评论前面加上这个图标,就找到这个部分的源码,然后找合适的位置粘贴进去就行,当然也可以直接在现有的class里去添加,在现有的class添加就只用 “fa fa-grav” 就可以了,如果要替换现有的图标直接在现有的class修改

进阶使用


下面是一些参数使用方法,如放大,翻转,动态等,使用的时候直接在基础用法的后面加参数,详情请看代码部分

 
1.图标放大,为了增加图标大小相对于它们的容器,使用fa-lg(33%递增)
fa-2x, fa-3x,fa-4xfa-5x类。
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

 
 
2.旋转并翻转,若要对图标进行任意旋转和旋转,可以使用fa-rotatefa-flip-
normal    fa-rotate-90    fa-rotate-180    fa-rotate-270
fa-flip-horizontal    fa-flip-vertical

<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> fa-flip-vertical

 
 
3.组合图标,如果想要将多个图标组合起来,使用fa-stack类,作为父容器,fa-stack-1x作为正常比例的图标,fa-stack-2x作为大一些的图标。还可以使用fa-inverse类来切换图标颜色,在父容器中通过添加更大的图标类来控制整体大小。

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>fa-twitter on fa-square-o<br>

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>fa-flag on fa-circle<br>


<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>fa-terminal on fa-square<br>


<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"></i>
</span>fa-ban on fa-camera

 
 
4.动态图标,先引入一个css动画,引入方式和上面一样。使用这个CSS动画来实现动态图标,使用fa-spin使任意图标种植旋转,可以还使用fa-pulse使其进行方位旋转

<link rel="stylesheet" href="https://itggg.bj.bcebos.com/cdn/font-awesome-animation.min.css">

 

旋转类

Loading...Loading...Loading...Loading...Loading...

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

 
 

其他13种动画效果,序号请参照下方代码

1.  |  2.  |  3.  |  4.  |  5.  |  6.  |  7.

8.  |  9.  |  10.11.  |  12.  |  13.

<i class="fa fa-wrench faa-wrench animated fa-3x"></i>
<i class="fa fa-bell faa-ring animated fa-3x"></i>
<i class="fa fa-envelope faa-horizontal animated fa-3x"></i>
<i class="fa fa-thumbs-up faa-vertical animated fa-3x"></i>
<i class="fa fa-exclamation-triangle faa-flash animated fa-3x"></i>
<i class="fa fa-thumbs-up faa-bounce animated fa-3x"></i>
<i class="fa fa-plane faa-float animated fa-3x"></i>
<i class="fa fa-heart faa-pulse animated fa-3x"></i>
<i class="fa fa-trophy faa-tada animated fa-3x"></i>
<i class="fa fa-space-shuttle faa-passing animated fa-3x"></i>
<i class="fa fa-space-shuttle faa-passing-reverse animated fa-3x"></i>
<i class="fa fa-circle faa-burst animated fa-3x"></i>
<i class="fa fa-star faa-falling animated fa-3x"></i>

 
 

鼠标点击动态,修改默认的动态参数   animated

参数说明:animated   循环动态
          animated-hover   鼠标移动到图标上动态


效果演示:移动鼠标到图标上
 
  |  

<i class="fas fa-bell faa-ring animated-hover"></i>
<i class="fas fa-spinner faa-spin animated-hover"></i>

 
 

怎么样?你学会了吗?

本文转自:Flat tire Blog

0

评论 (0)

取消