利用 Font Awesome 提升 Markdown 的表现能力

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

下面将以常用的编辑器 VS code 为例,介绍在 Markdown 文档中使用 Font Awesome 的具体方法。

插入符号

我们可以直接插入各类 Font Awesome 符号了,下面以微信图标为例说明:

语法:<i class="fa fa-weixin"></i>

显示:

获取符号名称

Font Awesome 的符号列表中搜索,就可以得到不同的符号的写法,点击符号名称右侧的复制图标,就可以复制它:

修改符号格式

使用 Font Awesome 的另一个优点是,除了上述简单的符号调用,还可以对这些符号进行格式的修改,以实现更丰富的排版可能性。下面列举几个日常用得到的有趣格式。

调节尺寸

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

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

改为

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

即可得到加大尺寸的符号

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

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

转动

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

  • <i class="fa fa-weixin fa-spin"></i> 显示为
  • <i class="fa fa- fa-pulse"></i>0 显示为

引用符下沉

在引文块的最前面使用了如下代码,即可实现引用符下沉的效果:

> <i class="fas fa-quote-left fa-3x fa-pull-left"></i> 早起的鸟儿有虫吃。

早起的鸟儿有虫吃。

其中,

  • fa-quote-left 是前引号,
  • fa-3x 表示符号尺寸,
  • fa-pull-left 表示使符号下沉。

更多用法

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

装饰 Markdown的更多相关文章

  1. python之6-4装饰器.md

    装饰器看的说实话真心郁闷,群里一伙计说了好一会,听得一愣一愣的,查了点资料,又自己试了下,算是明白了一些,记录记录=.=更郁闷的是,博客园的markdown标记支持怎么和为知的不匹配,这转过来的文章很 ...

  2. Django集成Markdown编辑器【附源码】

    专注内容写作的你一定不要错过markdown 简单介绍 markdown是一种标记语言,通过简单的标记语法可以使普通的文本内容具有一定的格式,使用非常简单,学习成本极低 目前各大Blog平台都已支持m ...

  3. 人工智能+Python:十大Markdown语法简明教程

    Markdown 是一种轻量级的标记语言,用户可以使用诸如 * # 等简单的标记符号以最小的输入代价生成极富表现力的文档,目前也被越来越多的写作爱好者,撰稿者广泛使用.本文希望用直观的方法来讲述Mar ...

  4. 第 8 篇:内容支持 Markdown 语法,接口返回包含解析后的 HTML

    作者:HelloGitHub-追梦人物 在 Django博客教程(第二版) 中,我们给博客内容增加了 Markdown 的支持,博客详情接口应该返回解析后的 HTML 内容. 来回顾一下 Post 模 ...

  5. NiceMark——我的Markdown编辑器

    NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...

  6. Markdown 图片助手-MarkdownPicPicker

    title: Markdown 图片助手 v0.1 toc: true comments: true date: 2016-06-04 16:40:06 tags: [Python, Markdown ...

  7. Python高手之路【四】python函数装饰器

    def outer(func): def inner(): print('hello') print('hello') print('hello') r = func() print('end') p ...

  8. 前端学Markdown

    前面的话   我个人理解,Markdown就是一个富文本编辑器语言,类似于sass对于css的功能,Markdown也可以叫做HTML预处理器,只不过它是一门轻量级的标记语言,可以更简单的实现HTML ...

  9. 装饰者模式 Decoration

    1.什么是装饰者模式 动态给对象增加功能,从一个对象的外部来给对象添加功能,相当于改变了对象的外观,比用继承的方式更加的灵活.当使用装饰后,从外部系统的角度看,就不再是原来的那个对象了,而是使用一系列 ...

随机推荐

  1. dubbo Filter

    官方说明: 调用拦截扩展 扩展说明 服务提供方和服务消费方调用过程拦截,Dubbo 本身的大多功能均基于此扩展点实现,每次远程方法执行,该拦截都会被执行,请注意对性能的影响. 约定: 用户自定义 fi ...

  2. opencv的基本数据结构(二)(转)

    转自:原文链接,以下代码.图片.内容有点改动,只为转载不降低博客内容的可阅性,版权归原作者所有. OpenCV中强大的Mat类型大家已经比较熟悉了.这里梳理一些在工程中其他经常用到的几种基本数据类型. ...

  3. 关于数据区间变换及numpy数组转图片数据的python实现

    python实现区间转换.numpy图片数据转换 需求: 客户的需求是永无止境的,这不?前几天,用户提出了一个需求,需要将一组数据从一个区间缩放到另一区间? 思路: 先将数据归一化,再乘以对应区间的差 ...

  4. C# TreeView 自定义显示checkbox

    本项目需要对TreeView进行定制,要求比较简单,主要要求如下: Winform中TreeView控件默认只支持所有级别的CheckBox显示或者不显示,不能控制制定Level的树节点显示 效果如下 ...

  5. UNIX环境高级编程 第1章 UNIX基础知识

    所有操作系统都为运行在它之上的程序提供各种服务,典型的服务包括:执行新程序.打开文件.读写文件.分配存储空间.提供时间等. UNIX体系结构 严格来说,操作系统是一种软件,它控制计算机硬件资源,提供程 ...

  6. Android Build.VERSION.SDK_INT兼容介绍

    尽管Android向下兼容不好,但是一个程序还是可以在多个平台上跑的.向下兼容不好,接口改变,新的平台上不能用旧的API,旧的平台更不可能用新的API,不等于一个平台需要一个APK.可以在高SDK上开 ...

  7. 洛谷 P4175: bzoj 1146: [CTSC2008]网络管理

    令人抓狂的整体二分题.根本原因还是我太菜了. 在学校写了一个下午写得头晕,回家里重写了一遍,一个小时就写完了--不过还是太慢. 题目传送门:洛谷P4175. 题意简述: 一棵 \(n\) 个结点的树, ...

  8. 理解mipi协议【转】

    转自:http://blog.csdn.net/wanglining1987/article/details/50202615 完成mipi信号通道分配后,需要生成与物理层对接的时序.同步信号: MI ...

  9. C#中HttpWebRequest的GetRequestStream执行的效率太低,甚至偶尔死掉

    为了提高httpwebrequest的执行效率,查到了一些如下设置 request.ServicePoint.Expect100Continue = false; request.ServicePoi ...

  10. Fiddler 4 抓包(APP HTTPS )

    一.手机连接Fiddler 1.配置fiddler 1.安装fiddler,基本下一步下一步即可: 2.打开fiddler,点击顶部栏Tools——>Options 3.在HTTPS页签勾选“D ...