我时常想要在此类文档中通过一些图形符号来表达更丰富的含义或是对段落进行标注，例如使用 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的更多相关文章

  1. R提高篇(二): 图形初阶

    目录: 图形示例 图形参数 符号.线条 颜色 文本属性 尺寸与边界 自定义标题 自定义坐标轴 图例 文本标注 图形组合 图形示例 如下代码描述病人对两种药物五个剂量水平上的响应情况 > myda ...

  2. R语言实战读书笔记(三)图形初阶

    这篇简直是白写了,写到后面发现ggplot明显更好用 3.1 使用图形 attach(mtcars)plot(wt, mpg) #x轴wt,y轴pgabline(lm(mpg ~ wt)) #画线拟合 ...

  3. [R]关于R语言的绘图函数

    1. 首先就是plot(x,y,...) 参数: x: 所绘图形横坐标构成的对象 y: 所绘图形纵坐标构成的对象 type: 指定所绘图形类型 pch: 指定绘制点时使用的符号 cex: 指定符号的大 ...

  4. javascript开源大全

    javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...

  5. R 语言学习笔记（3）—— 基础绘图

    R 中图形的概念 在 R 中图,就像 photoshop 中的图层一样,每一个元素都是层层向上延展构建的,最终形成了我们视觉上所形成的平面图形.这些元素包含了常见的图形的标题(title).坐标轴(a ...

  6. markdown常用语法使用笔记+使用技巧(持续更新......)

    参考引用内容: 简书教程 一 基本语法 1. 标题 语法: 在想要设置为标题的文字前面加#来表示,一个#是一级标题,二个#是二级标题,以此类推.支持六级标题. 注:标准语法一般在#后跟个空格再写文字 ...

  7. R语言实战（第二版）-part 1笔记

    说明: 1.本笔记对<R语言实战>一书有选择性的进行记录,仅用于个人的查漏补缺 2.将完全掌握的以及无实战需求的知识点略去 3.代码直接在Rsudio中运行学习 R语言实战(第二版) pa ...

  8. Font Awesome符号字体

    http://www.fontawesome.com.cn/ 引用CSS包之后根据图标库找到所需的图标代码 使用i标签或者a标签皆可,符号为文字性质,可以直接通过修改text颜色从而修改符号颜色

  9. font awesome 符号字体

    http://www.fontawesome.com.cn/ 引用CSS包之后根据图标库找到所需的图标代码 使用i标签或者a标签皆可,符号为文字性质,可以直接通过修改text颜色从而修改符号颜色

随机推荐

  1. Spark学习(1) Spark入门

    什么事spark Spark是一种快速.通用.可扩展的大数据计算引擎.项目是用Scala进行编写,基于内存计算的 包括交互式查询和流处理 spark内置项目 Spark SQL:是 Spark 用来操 ...

  2. LeetCode 5274. Number of Ways to Stay in the Same Place After Some Steps - Java - DP

    题目链接:5274. 停在原地的方案数 You have a pointer at index 0 in an array of size arrLen. At each step, you can ...

  3. AJAX调用数据，滚动到底部

    最近一个小项目里面,需要使用AJAX去拉取数据,并且直接显示最后一条信息,也就是滚动到底部.实现脚本如下: var scrollHeight = $('.txtBox3').prop("sc ...

  4. Oracle解决锁表语句与批量生成解锁语句

    --以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...

  5. C# 练习题 将一个正整数分解质因数

    题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5.程序分析:对n进行分解质因数,应先找到一个最小的质数k,然后按下述步骤完成:(1)如果这个质数恰等于n,则说明分解质因数的过程 ...

  6. spring Boot 学习（五、Spring Boot与安全）

    一.安全Spring Security是针对Spring项目的安全框架,也是Spring Boot底层安全模 块默认的技术选型.他可以实现强大的web安全控制.对于安全控制,我们仅 需引入spring ...

  7. deppin Linux下安装docker

    首先楼主用的是deppin15.11 docker 简介:Docker作为一个软件集装箱化平台,可以让开发者构建应用程序时,将它与其依赖环境一起打包到一个容器中,然后很容易地发布和应用到任意平台中. ...

  8. sense chrome扩展工具安装问题

    下载一个chrome的插件,只能在国内下了.有个什么插件网 .下载完之后是  .crx 格式的.直接拖到 chrome的扩展工具里,显示,插件有问题.无语 参考了一个网上的教程. 1.先将扩展名 .c ...

  9. 【转载】WPS通过设置密码的方式对Excel文件加密

    有时候Excel文件中可能包含一些敏感数据,此时希望对Excel文件进行加入密码的形式进行加密保护,在WPS软件和Office Excel软件中都支持对Excel文件进行密码保护,设置了密码保护的Ex ...

  10. js中逻辑或的作用

    var config = null; undefined var result = config||{}; undefined result {} var config = undefined; un ...