Loading... <link rel="stylesheet" href="https://npm.elemecdn.com/font-awesome@4.7.0/css/font-awesome.min.css"> <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 1, 2022 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 1 如果你想请我喝奶茶的话
7 comments
加了https访问成了500
啥500? 官方的图标库啊
颜色怎么换?
class 里加:style="color: "颜色代码"
不是class里面加吧...在标签里面加才对吧
一样的 一样的