Markdown Awesome
Roy Lv7
2018-08-17 04:59:10 669 字 2 分钟

`

`

fontawesome-markdown

在markdown文章张使用图标装饰

在之前的工作中制作原型，包括上一篇文章中用到的iconfont的图标，每次都要处理多次。
看到bootstrap的教程中使用@face-font 可以使用图标，突然想到markdown能否直接调用iconfont、fontawesome的图标？网上一搜果然是有的，像我一样的懒人在我之前就存在。

准备工作

Font Awesome是一个字体和图标工具包，包含人物、动物、建筑、商业、品牌、娱乐、动作等等各种主题丰富的图标符号，iconfont也类似起步晚一点是ali旗下的一个开源工具包。

要在markdown文档中输入Font Awesome，需要在文档任意位置输入一下代码调用JavaScript。

1
2
3
4
5
<head> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script> 
</head> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

iconFont的使用方法类似，但是区别是，需要将使用的图标先用自己的账号登陆后，收藏然后下载生成的css文件。需要引用本地的css文件。
当然灵活性要差一点，必须之前没有收藏某个图标，这下抓瞎了吧。😭
生成的css文件格式格式类似如下：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

使用方法

现在就可以直接插入Font Awesome和iconfont的符号了。

1
<i class="fa fa-weixin"><i>

iconfont使用方法类似

1
<i class="iconfont icon-xxx"></i>

这是表示插入了一个微信图标的符号。

获取符号名称

fa-weixin 是微信的名称，如何调用其他的图标呢？
在awesome 获取后可以保存到LaunchBar中一遍以后方便使用。
iconfont 只需要点击收藏就好，在生成的css中可以查询。

调节尺寸

1
<i class="fa fa-weixin"><i>

扩展改写为：

1
<i class="fa fa-weixin fa-2x"><i>


可用参数列表：

1
2
3
4
5
6
fa-xs
fa-sm
fa-lg
fa-2x至fa-10x
### 动画效果
在class中加入 “fa-spin” 使符号变成连贯转动，加入“fa-pulse”变成8步旋转效果。

符号的特殊用法

####符号下沉

1
2
3
4
<i class="fas fa-quote-left fa-3x fa-pull-left"></i>
fa-quote-left 是符号名称
fa-3x         表示大小
fa-pull-left  符号下沉

上篇文章中所应用到的图标 应该如下正确使用:

小火箭











以上是icon的应用，接下来制定自己的学习计划，开始学习Vue.js。
  • 本文标题：Markdown Awesome
  • 本文作者：Roy
  • 创建时间：2018-08-17 04:59:10
  • 本文链接：https://www.yrzdm.com/2018/08/17/markdown-awesome/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！