码迷,mamicode.com
首页 > 其他好文 > 详细

更丰富的符号工具包 Font Awesome

时间:2019-09-13 19:41:07      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:效果   基础用法   src   lse   nbsp   影响   语法   表达   准备   

我时常想要在此类文档中通过一些图形符号来表达更丰富的含义或是对段落进行标注,例如使用 Emoji。然而 Emoji 在这方面仍然有存在一些不足,如:

  • 颜色与文字风格不统一,
  • 在不同系统的平台上显示不统一,
  • 种类有限,很多时候找不到合适的表情。

这时,可以在文档写作时引入另一个更丰富的符号工具包 Font Awesome

简介

Font Awesome 是一个字体和图标工具包,包含人物、动物、建筑、商业、品牌等等各种主题丰富的图标符号,可以通过相应的语法添加在 Markdown 文档中,像 Emoji 一样配合文字使用。它提供了 Font Awesome Free 和 Font Awesome Pro 两个方案,前者可以免费使用,后者需要付费以使用更多图标。但实际上免费方案中就提供了上千个图标,足够日常使用。

准备工作

要在 Markdown 文档中输入 Font Awesome,需要在文档中任意位置贴粘入如下语句(可以放在文档结尾处,以不影响直接在 Markdown 文档中的阅读):

<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.0.13/css/all.css">

我自己注册了一个免费的,有些图标是用不了的。

插入符号

其基础用法是 : 

<i class="fa fa-weixin"></i>
<i class="fa fa-weibo"></i> 

“fa” 为前缀,“weixin” 为图标名称

fa版本5中不推荐使用 该前缀。新的默认值是fas实体样式和fab品牌样式。

更多的符号可以在 Font Awesome 的符号列表中搜索。

修改样式

除了简单的调用,还能调整大小、旋转、排列、层叠等。

(i)  调节尺寸

要调节符号的尺寸,只需对其名称加上尺寸的参数,例如,要调大上文所述的微信图标符号的尺寸,只需把

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

拓展写为:

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

尺寸参数共有如下几阶,感兴趣的话可以自行尝试其效果:

  • fa-xs
  • fa-sm
  • fa-lg
  • fa-2x 至 fa-10x

(ii) 动画

通过在符号名称中加入 fa-spin 就可以使符号变成动态的连贯转动效果,通过 fa-pulse 也可以变成 8 步旋转效果:

例如:

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-2x fa-pulse"></i>

(iii) 更多用法

除此之外,Font Awesome 还有许多其它调节格式的语法,有兴趣的读者可在这个 Font Awesome 官方说明页面进行查阅:

How to Use | Font Awesome

 

 

参考链接:https://sspai.com/flipboard/post/45217

 

更丰富的符号工具包 Font Awesome

标签:效果   基础用法   src   lse   nbsp   影响   语法   表达   准备   

原文地址:https://www.cnblogs.com/lfri/p/11517300.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!