更丰富的符号工具包 Font Awesome
我时常想要在此类文档中通过一些图形符号来表达更丰富的含义或是对段落进行标注，例如使用 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-xsfa-smfa-lgfa-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 官方说明页面进行查阅：
参考链接：https://sspai.com/flipboard/post/45217
更丰富的符号工具包 Font Awesome的更多相关文章
- R提高篇(二): 图形初阶
目录: 图形示例 图形参数 符号.线条 颜色 文本属性 尺寸与边界 自定义标题 自定义坐标轴 图例 文本标注 图形组合 图形示例 如下代码描述病人对两种药物五个剂量水平上的响应情况 > myda ...
- R语言实战读书笔记(三)图形初阶
这篇简直是白写了,写到后面发现ggplot明显更好用 3.1 使用图形 attach(mtcars)plot(wt, mpg) #x轴wt,y轴pgabline(lm(mpg ~ wt)) #画线拟合 ...
- [R]关于R语言的绘图函数
1. 首先就是plot(x,y,...) 参数: x: 所绘图形横坐标构成的对象 y: 所绘图形纵坐标构成的对象 type: 指定所绘图形类型 pch: 指定绘制点时使用的符号 cex: 指定符号的大 ...
- javascript开源大全
javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...
- R 语言学习笔记（3）—— 基础绘图
R 中图形的概念 在 R 中图,就像 photoshop 中的图层一样,每一个元素都是层层向上延展构建的,最终形成了我们视觉上所形成的平面图形.这些元素包含了常见的图形的标题(title).坐标轴(a ...
- markdown常用语法使用笔记+使用技巧(持续更新......)
参考引用内容: 简书教程 一 基本语法 1. 标题 语法: 在想要设置为标题的文字前面加#来表示,一个#是一级标题,二个#是二级标题,以此类推.支持六级标题. 注:标准语法一般在#后跟个空格再写文字 ...
- R语言实战（第二版）-part 1笔记
说明: 1.本笔记对<R语言实战>一书有选择性的进行记录,仅用于个人的查漏补缺 2.将完全掌握的以及无实战需求的知识点略去 3.代码直接在Rsudio中运行学习 R语言实战(第二版) pa ...
- Font Awesome符号字体
http://www.fontawesome.com.cn/ 引用CSS包之后根据图标库找到所需的图标代码 使用i标签或者a标签皆可,符号为文字性质,可以直接通过修改text颜色从而修改符号颜色
- font awesome 符号字体
http://www.fontawesome.com.cn/ 引用CSS包之后根据图标库找到所需的图标代码 使用i标签或者a标签皆可,符号为文字性质,可以直接通过修改text颜色从而修改符号颜色
随机推荐
- 为何一个@LoadBalanced注解就能让RestTemplate拥有负载均衡的能力？【享学Spring Cloud】
每篇一句 你应该思考:为什么往往完成比完美更重要? 前言 在Spring Cloud微服务应用体系中,远程调用都应负载均衡.我们在使用RestTemplate作为远程调用客户端的时候,开启负载均衡极其 ...
- 全球DEM高程数据下载
本文主要介绍如何使用“迈高图-地图数据下载器”(以下简称:迈高图)下载全球DEM高程数据,任意下载范围自动拼接.裁剪.DEM高程数据支持下载导出为:GeoTIFF.XYZ.南方CASS等常用数据格式. ...
- CF241E Flights 差分约束
传送门 差分约束永远是Itst最烂的图论知识点没有之一qwq 先用dfs把在\(1\)到\(N\)的路径上的所有点都拿出来,其他的点和边状态任意都不会影响答案. 然后考虑设\(dis_i\)表示从\( ...
- Java函数式编程
函数式编程 从JDK1.8开始为了简化使用者进行代码的开发,专门提供有lambda表达式的支持,利用此操作形式可以实现函数式的编程,对于函数编程比较著名的语言是:haskell.Scala,利用函数式 ...
- httpd服务的配置及应用
一.httpd服务的配置文件 httpd服务的主配置文件通常为httpd根目录下的conf/httpd.conf文件,通过yum安装的httpd服务的主配置路径通常如下: httpd-2.2:/etc ...
- java之spring mvc之ajax
1.可以使用servletAPI来实现 ajax Controller 类 @Controller public class AjaxController { @RequestMapping(&quo ...
- flickity：支持触摸滑动，响应迅速的幻灯片轮播插件
简介:flickity 是一个支持触摸,响应迅速的幻灯片轮播插件.支持环绕滑动.自由滑动.组滑动.自动播放.延迟加载.视差滑动.图片滑动.兼容IE10+, Android 4+, Safari for ...
- 2019年Amazon AWS-Solutions-Architect-Professional考试最新题库（AWS SAP题库）带考试模拟器
大家好,由于最近自己备考Amazon AWS-Solutions-Architect-Professional考试,购买了以下链接的题库,并通过了考试 https://www.kaoguti.gq/A ...
- Kafka 生产者、消费者与分区的关系
背景 最近和海康整数据对接, 需要将海康产生的结构化数据拿过来做二次识别. 基本的流程: 海康大数据 --> kafka server --> 平台 Kafka 的 topic 正常过车 ...
- Java自学-类和对象 方法重载
什么是Java 方法重载 方法的重载指的是方法名一样,但是参数类型不一样 步骤 1 : attack方法的重载 有一种英雄,叫做物理攻击英雄 ADHero 为ADHero 提供三种方法 public ...