原文引用 大专栏 https://www.dazhuanlan.com/2019/08/26/5d63571970f75/
Tim开始了对Markdown高阶用法的探索！ |
在Markdown中，我们时常要调用一些小图片，而这些小图片如果去网上找或者上传图床会十分的麻烦。此时，一种一站式解决方案出现了——Font Awesome
Font Awesome是一个图标站，并且可以方便的调用刀Markdown、HTML中，所以这是一个很强大的工具。今天就来学习一下在Markdown语言中Font Awesome的用法
Font Awesome基础
添加图标
效果:
我的微信
使用方法:
第一步:在Font Awesome的CDN站注册并获取自己的js文档
这里使用CDN站是因为Font Awesome的主站在国内访问比较慢，CDN站速度会快很多
之后,我们便获取了一个专属的js文档
<script src="https://use.fontawesome.com/你的专属码.js"></script> |
第二步:将这个js文档插入Markdown文档
<head> <script src="https://use.fontawesome.com/你的专属码.js"></script></head> |
我们需要将上面这段代码插入Markdown文档的任意位置
第三步:在文章中调用图标文档
我们可以去FontAwesome官网找到心水的图标
<i class="fa fa-weixin"></i> 我的微信 |
放大图标
方法一:使用fa-nx放大
效果:
1x
133%
2x
3x
代码:
<i class = "fa fa-weixin"></i>1x<i class = "fa fa-weixin fa-lg"></i>133%<i class = "fa fa-weixin fa-2x"></i>2x<i class = "fa fa-weixin fa-3x"></i>3x缺点:最高支持五倍放大 |
方法二:使用font-size放大
效果:
10px
30px
50px
代码:
<i class = "fa fa-weixin" style = "font-size: 10px"></i>10px<i class = "fa fa-weixin" style = "font-size: 30px"></i>30px<i class = "fa fa-weixin" style = "font-size: 50px"></i>50px优点:无限放大缺点:麻烦 |
Font Awesome进阶
图标上色
效果:
红
绿
死亡配色…
代码:
<i class = "fa fa-weixin fa-2x" style = "color:red"></i>红 <i class = "fa fa-weixin fa-2x" style = "color:green"></i>绿 |
让图标动起来
效果:
连续的旋转
八帧旋转
代码
<i class = "fa fa-spinner fa-2x fa-spin"></i>连续的旋转 <i class = "fa fa-spinner fa-2x fa-pulse"></i>八帧旋转 |
附:常用的旋转图标
加载图标1<i class = "fa fa-spinner fa-spin"></i>
加载图标2<i class = "fa fa-circle-o-notch fa-spin">
设置图标<i class = "fa fa-cog fa-spin">
刷新图标<i class = "fa fa-refresh fa-spin">
图标下沉(文字环绕)
效果（此处引用开头的代码）:
在Markdown中，我们时常要调用一些小图片，而这些小图片如果去网上找或者上传图床会十分的麻烦。此时，一种一站式解决方案出现了——Font Awesome
Font Awesome是一个图标站，并且可以方便的调用刀Markdown、HTML中，所以这是一个很强大的工具。今天就来学习一下在Markdown语言中Font Awesome的用法
代码
> <i class="fa fa-quote-left fa-3x fa-pull-left"></i>在Markdown中，我们时常要调用一些小图片，而这些小图片如果去网上找或者上传图床会十分的麻烦。此时，一种一站式解决方案出现了——Font Awesome > Font Awesome是一个图标站，并且可以方便的调用刀Markdown、HTML中，所以这是一个很强大的工具。今天就来学习一下在Markdown语言中Font Awesome的用法 |
图标加边框
效果
代码
<i class="fa fa-quote-left fa-border"></i> |
图标的旋转与翻转
旋转
效果
上箭头
左箭头
下箭头
右箭头
代码
<i class="fa fa-arrow-up"></i>上箭头 <i class="fa fa-arrow-up fa-rotate-90"></i>左箭头 <i class="fa fa-arrow-up fa-rotate-180"></i>下箭头 <i class="fa fa-arrow-up fa-rotate-270"></i>右箭头 |
翻转
效果
普通
左右翻转
上下翻转
代码
<i class="fa fa-envira"></i>普通 <i class="fa fa-envira fa-flip-horizontal"></i>左右翻转 <i class="fa fa-envira fa-flip-vertical"></i>上下翻转 |
图标的堆叠
效果:
<span class="fa-stack"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x" style = "color:red"></i></span>禁止拍照 |
代码:
<span class="fa-stack [此处使用fa-nx或fa-lg可以整体放大]"> <i class="fa fa-camera fa-stack-1x(较小图标)"></i> <i class="fa fa-ban fa-stack-2x(较大图标)" style = "color:red"></i></span>禁止拍照 |