Loading... ## Font Awesome <code>Font Awesome</code> 是为 <code>Twitter Bootstrap </code>设计的图标字体，通过<code>Web Font</code>的方式来显示一些图标，好处是图标可以被任意缩放、改变颜色，你需要做的只是像修改文字样式那样修改图标样式，现在非常多的网站还有博客都是使用的这套图标  ## 基本使用 **1**.在站点的在<code>head</code>处引入官方的<code>font-awesome.min.css</code> ``` <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> ``` **2**.其他博客或者网站就在你的<code>header</code>头部引入就可以了，如图  **3**.<code>Handsome</code>主题直接在：设置外观-开发者设置-自定义输出<code>header</code>头部的<code>HTML</code>代码  **4**.引入完成，就去这个图标库里去找你想要的图标 [图标库](http://www.fontawesome.com.cn/faicons/) 然后复制下来这串代码，然后就可以把这个 <code>i </code>标签放在任何位置。  **5**.举个栗子 <img src="https://www.itggg.cn/usr/themes/handsome/assets/img/emotion/aru/meditation.png" class="emotion-aru"> 比如我要在我博客右侧的统计信息评论前面加上这个图标，就找到这个部分的源码，然后找合适的位置粘贴进去就行，当然也可以直接在现有的<code>class</code>里去添加，在现有的<code>class</code>添加就只用 <code>“fa fa-grav” </code>就可以了，如果要替换现有的图标直接在现有的<code>class</code>修改 <div class='album_block'> [album]    [/album] </div> ## 进阶使用 <div class="tip inlineBlock warning"> 下面是一些参数使用方法，如放大，翻转，动态等，使用的时候直接在基础用法的后面加参数，详情请看代码部分 </div> ### 1.图标放大 为了增加图标大小相对于它们的容器，使用<code>fa-lg（33％递增）</code> <code>fa-2x， fa-3x，fa-4x</code>或<code>fa-5x</code>类。 <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 ``` <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.旋转并翻转 若要对图标进行任意旋转和旋转，可以使用<code>fa-rotate*</code>和<code>fa-flip-*</code>类 <i class="fa fa-shield fa-4x"></i> normal <i class="fa fa-shield fa-rotate-90 fa-4x"></i> fa-rotate-90 <i class="fa fa-shield fa-rotate-180 fa-4x"></i> fa-rotate-180 <i class="fa fa-shield fa-rotate-270 fa-4x"></i> fa-rotate-270</br><i class="fa fa-shield fa-flip-horizontal fa-4x"></i> fa-flip-horizontal <i class="fa fa-shield fa-flip-vertical fa-4x"></i> 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.组合图标 如果想要将多个图标组合起来，使用<code>fa-stack</code>类，作为父容器，<code>fa-stack-1x</code>作为正常比例的图标，<code>fa-stack-2x</code>作为大一些的图标。还可以使用<code>fa-inverse</code>类来切换图标颜色，在父容器中通过添加更大的图标类来控制整体大小。 <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 <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 <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 <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 ``` <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.动态图标 先引入一个<code>css</code>动画，引入方式和上面一样。使用这个<code>CSS</code>动画来实现动态图标，使用<code>fa-spin</code>使任意图标种植旋转，可以还使用<code>fa-pulse</code>使其进行方位旋转 ``` <link rel="stylesheet" href="https://itggg.cn/cdn/font-awesome-animation.min.css"> ``` <div class="tip inlineBlock info"> **旋转类** </div> <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> ``` <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> ``` <div class="tip inlineBlock info"> 其他13种动画效果，序号请参照下方代码 </div> 1.<i class="fa fa-wrench faa-wrench animated fa-3x"></i>  |  2.<i class="fa fa-bell faa-ring animated fa-3x"></i>  |  3.<i class="fa fa-envelope faa-horizontal animated fa-3x"></i>  |  4.<i class="fa fa-thumbs-up faa-vertical animated fa-3x"></i>  |  5.<i class="fa fa-exclamation-triangle faa-flash animated fa-3x"></i>  |  6.<i class="fa fa-thumbs-up faa-bounce animated fa-3x"></i>  |  7.<i class="fa fa-plane faa-float animated fa-3x"></i></br></br>8.<i class="fa fa-heart faa-pulse animated fa-3x"></i>  |  9.<i class="fa fa-trophy faa-tada animated fa-3x"></i>  |  10.<i class="fa fa-space-shuttle faa-passing animated fa-3x"></i>11.<i class="fa fa-space-shuttle faa-passing-reverse animated fa-3x"></i>  |  12.<i class="fa fa-circle faa-burst animated fa-3x"></i>  |  13.<i class="fa fa-star faa-falling animated fa-3x"></i> ``` <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> ``` <div class="tip inlineBlock info"> 鼠标点击动态，修改默认的动态参数 animated </div> 参数说明：<code>animated</code>   循环动态           <code>animated-hover</code>   鼠标移动到图标上动态 </br> 效果演示：移动鼠标到图标上 <i style="color:green" class="fa fa-spinner faa-spin animated-hover fa-3x"></i>  |  <i class="fa fa-bell faa-ring animated-hover fa-3x"></i> ``` <i class="fas fa-bell faa-ring animated-hover"></i> <i class="fas fa-spinner faa-spin animated-hover"></i> ``` ### 5.图标颜色 在 `class` 里加：`style="color:颜色"`即可 <i class="fa fa-camera-retro fa-4x" style="color:green"></i> | <i class="fa fa-camera-retro fa-4x" style="color:red"></i> | <i class="fa fa-camera-retro fa-4x" style="color:blue"></i> ``` <i class="fa fa-camera-retro fa-4x" style="color:green"></i> <i class="fa fa-camera-retro fa-4x" style="color:red"></i> <i class="fa fa-camera-retro fa-4x" style="color:blue"></i> ``` <div class="tip inlineBlock warning"> **怎么样？你学会了吗？** </div> Last modification：December 22nd, 2020 at 08:05 pm © 允许规范转载 Support 如果你想请我喝奶茶的话 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat
7 comments
加了https访问成了500
啥500？ 官方的图标库啊
颜色怎么换？
class 里加：style="color: "颜色代码"
不是class里面加吧...在标签里面加才对吧
一样的 一样的