装饰 Markdown
利用 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-2x
至fa-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的更多相关文章
- python之6-4装饰器.md
装饰器看的说实话真心郁闷,群里一伙计说了好一会,听得一愣一愣的,查了点资料,又自己试了下,算是明白了一些,记录记录=.=更郁闷的是,博客园的markdown标记支持怎么和为知的不匹配,这转过来的文章很 ...
- Django集成Markdown编辑器【附源码】
专注内容写作的你一定不要错过markdown 简单介绍 markdown是一种标记语言,通过简单的标记语法可以使普通的文本内容具有一定的格式,使用非常简单,学习成本极低 目前各大Blog平台都已支持m ...
- 人工智能+Python:十大Markdown语法简明教程
Markdown 是一种轻量级的标记语言,用户可以使用诸如 * # 等简单的标记符号以最小的输入代价生成极富表现力的文档,目前也被越来越多的写作爱好者,撰稿者广泛使用.本文希望用直观的方法来讲述Mar ...
- 第 8 篇:内容支持 Markdown 语法,接口返回包含解析后的 HTML
作者:HelloGitHub-追梦人物 在 Django博客教程(第二版) 中,我们给博客内容增加了 Markdown 的支持,博客详情接口应该返回解析后的 HTML 内容. 来回顾一下 Post 模 ...
- NiceMark——我的Markdown编辑器
NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...
- Markdown 图片助手-MarkdownPicPicker
title: Markdown 图片助手 v0.1 toc: true comments: true date: 2016-06-04 16:40:06 tags: [Python, Markdown ...
- Python高手之路【四】python函数装饰器
def outer(func): def inner(): print('hello') print('hello') print('hello') r = func() print('end') p ...
- 前端学Markdown
前面的话 我个人理解,Markdown就是一个富文本编辑器语言,类似于sass对于css的功能,Markdown也可以叫做HTML预处理器,只不过它是一门轻量级的标记语言,可以更简单的实现HTML ...
- 装饰者模式 Decoration
1.什么是装饰者模式 动态给对象增加功能,从一个对象的外部来给对象添加功能,相当于改变了对象的外观,比用继承的方式更加的灵活.当使用装饰后,从外部系统的角度看,就不再是原来的那个对象了,而是使用一系列 ...
随机推荐
- 基于bootstrup treeview多级列表树插件
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- react-music React全家桶项目,精品之作!
React-Music 全家桶项目,精品之作! 一.简介 该项目是基于React全家桶开发的一个音乐播放器,技术栈采用:Webpack + React + React-redux + React-ro ...
- c# net 使用反射为对象赋值
public T Bson2T(MongoDB.Bson.BsonDocument bson) { T t = default(T); //获取T类中的所有属性 PropertyInfo[] Tpro ...
- window对象中的一些重要的属性和方法(笔记)
setTimeout()方法用来实现一个函数在指定的毫秒数之后运行:setTimeout()返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行.由于历史原因,setTime ...
- jQuery中下拉框select的操作方法详解
最近在写页面的时候常常遇到要动态增删改下拉框select的情况,由于我比较习惯用jquery框架来架构我的前端js,所以就顺便把各种jquery操作下拉框select的方法总结了一下,收藏起来以便下次 ...
- C#中2个日期类型相减
DateTime startTime = Convert.ToDateTime("2017-1-9");DateTime endTime = Convert.ToDateTime( ...
- Python练习-sys.argv的无聊用法
代码如下: # 编辑者:闫龙 #将三次登陆锁定的作业改为: # python login.py -u alex -p 123456 输入的形式 # (-u,-p是固定的,分别代表用户名和密码) imp ...
- 假·最大子段和 (sdutoj 4359 首尾相连)(思维)
题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Contest/contestproblem/cid/2736/pid/4359 具体思 ...
- 编写shell脚本一键启动zookeeper集群!!
踩了一个多小时坑终于解决了: 这里分享给大家,更主要的目的是记住这些坑,避免以后重复走!!! 首先,这里采用ssh秘钥方式进行集群主机之间免密登录执行启动命令 这里简单说下原理: 通过ssh去另外一台 ...
- Gradle详解
一.脚本文件(build.gradle) 项目与脚本文件 当我们执行gradle命令的时候,Gradle会在你执行命令的目录下寻找一个名为build.gradle的文件,这个文件就是Gradle的脚 ...