惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

人人都是产品经理
人人都是产品经理
MyScale Blog
MyScale Blog
Y
Y Combinator Blog
罗磊的独立博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
P
Proofpoint News Feed
Google DeepMind News
Google DeepMind News
V
Vulnerabilities – Threatpost
T
The Blog of Author Tim Ferriss
云风的 BLOG
云风的 BLOG
Recorded Future
Recorded Future
N
News and Events Feed by Topic
B
Blog RSS Feed
阮一峰的网络日志
阮一峰的网络日志
博客园_首页
C
CXSECURITY Database RSS Feed - CXSecurity.com
博客园 - 【当耐特】
N
Netflix TechBlog - Medium
博客园 - 叶小钗
B
Blog
Vercel News
Vercel News
T
Tenable Blog
T
The Exploit Database - CXSecurity.com
Spread Privacy
Spread Privacy
T
Threat Research - Cisco Blogs
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Last Week in AI
Last Week in AI
F
Fortinet All Blogs
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Microsoft Security Blog
Microsoft Security Blog
S
Securelist
Microsoft Azure Blog
Microsoft Azure Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
P
Palo Alto Networks Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
D
DataBreaches.Net
Cyberwarzone
Cyberwarzone
Engineering at Meta
Engineering at Meta
Martin Fowler
Martin Fowler
G
GRAHAM CLULEY
Project Zero
Project Zero
Cisco Talos Blog
Cisco Talos Blog
A
Arctic Wolf
C
CERT Recently Published Vulnerability Notes
L
LangChain Blog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
C
Check Point Blog
A
About on SuperTechFans
W
WeLiveSecurity
The GitHub Blog
The GitHub Blog

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派 万字剖析:千问App深度体验报告(2026) - 少数派 在2026年,如何真正防止别人抄袭你的作品 - 少数派 怎么用 50 块搭个 AI 语音助手?我踩了 3 天坑 - 少数派 YeeroAI:让 AI 对话真正成为知识管理的一部分 - 少数派 爬泰山 - 少数派 「旅图显影」 App 更新:这次,我们补上了一点「手感」 - 少数派 假期出门太折磨?我的 23 条经验帮你规划惬意旅行 - 少数派 工作流会变吗 - 少数派 Claude Opus 4.6 怎么用最省钱?我测了 5 种方案 - 少数派 GPT Image 2 让图文并茂不再稀罕 - 少数派 用户侧出发——什么是AI,我要不要学习? - 少数派 找片、转存、整理、播放一条龙!让你的付费网盘值回票价 - 少数派 欢迎试用!日课一问2.0插件 - 少数派 自己做的MDeditor,原本想购买 Typora 试了两次支付不成功,干脆自己做一个 - 少数派 vibe coding了一个 3MB 的小工具,让 ~/Downloads 彻底告别混乱 - 少数派 因为受不了 Mac 的风扇策略,我做了一个风扇控制工具 - 少数派 别只怪模型 - 少数派 Warp 终端的 AI 功能怎么用?我测了一周的体验 - 少数派 AI 写代码老是出 bug?这 5 个配置我后悔没早知道 - 少数派 「新玩意」苹果出相机可能就这样:Sigma BF + 45mm F2.8 DG Contemporary - 少数派 一个面向2030年的AI操作系统是什么样子的:浅谈cola这款有灵魂的Agent - 少数派 别只看写代码 - 少数派 每天解决10个问题,还是一口气攻坚解决400个? - 少数派 AI 交易机器人怎么搭?我用 Claude 跑了一周实盘 - 少数派 Maptoposter Online:把你爱的城市画成艺术海报 - 少数派 Function Calling 怎么用?我测了 3 个模型发现差距真大 - 少数派 Legend Talk:我做了个 AI 圆桌,让 160 位思想家围着你的问题转 - 少数派 如何找到自己的蓝方?在小县城寻找压力测试 - 少数派 语音输入与软件接口|2026年聊AI时,我们都聊些什么(上) - 少数派 混动已经卖爆,纯电又来补刀——钛7闪充版简直“不讲武德” - 少数派 本月玩什么|朋友收藏、识质存在、沙罗周期 - 少数派 为什么要每天坚持输出? - 少数派 Claude API 挂了好几个小时,你的项目有备用方案吗? - 少数派 Function Calling 没你想的复杂——我用它做了个有点用的工具 - 少数派 登录系统立即播放视频或者图片音乐的软件 - 少数派 我为什么创建 FlipHTML5 下载工具 - 少数派 残局没电?多品牌外设电量统一管理软件EasyBluetooth已支持RTSS游戏内显示以及AIDA64 - 少数派 前往通义路的路 - 少数派 太好看了,媲美Sun的个人导航页,NAS部署星云门户 - 少数派 乌黑嘴唇“一键检测”上线了 - 少数派 派早报:Claude AI 接入多个创意软件生态、FILCO 生产方接手品牌等 - 少数派 【更新】BearCLI、Claude 连接器与 MCP 服务器 - 少数派 记了上千条流水,还是看不懂财务?我做了一个让 AI 读懂账本的工作台 - 少数派 MINI R56 升级原厂 Sport 模式 - 少数派 新玩意 | 一棵柠檬树(仿真版) - 少数派 Momenta的“物理AI”野望,需迈过“含摩量”这道关 - 少数派 网页直接投屏控制手机!NAS一键部署PandaScrcpy,流畅丝滑可远程。 - 少数派 众测|邀你一同探索随身 AI 硬件入口 YoooClaw C·ONE - 少数派 2050大会:分享时间是真诚 参会记 - 少数派 iPad 赋能电影创作:国内首部宣纸手绘长片《燃比娃》的幕后故事 - 少数派 AI的审美:我用 8 个大模型给 100 张旅行照片打分 - 少数派 普通人如何破圈?去参加一个本地协会 - 少数派 把极空间的图标全换了,主题DIY全攻略打造你的专属NAS桌面 - 少数派 电子便签墙,帮你实现便签自由 - 少数派 我如何用三个 CLI 工具取代文档创建需求 - 少数派 原来真的有人可以玩一辈子 - 少数派 社区速递 139 | 派友热议三月买了啥、复古单反尼康 Df 体验 - 少数派 06 作品的赏析与评价 - 少数派 TDS REVIEW|索尼 WF-1000XM6 降噪真无线耳机体验 - 少数派 35.98万起售的第二代腾势D9,我看重的不是堆料,而是不凑合 - 少数派 鼠须管 Squirrel 皮肤配置指北 - 少数派 从watch ultra2换到redmi watch6 - 少数派 派早报:阿里巴巴发布视频生成模型 HappyHorse 1.0 等 - 少数派 别迷信1M - 少数派 家人们天塌了!网盘“大封杀”,多个渠道多条路,NAS部署PanHub - 少数派 AI与人勾心斗角!NAS一键部署AI狼人杀,假日休闲必备。 - 少数派 电商必备!Comfyui工作流批量生图插件,一次生成12张!支持Nano banana pro模型 - 少数派 Comfyui工作流配置Gpt-image-2模型教程,0.03/张 - 少数派 OpenClaw第三方APi怎么配置?可使用Gpt-image-2模型 - 少数派 会员社区话题精选 Ep. 103 - 少数派
巧用 Font Awesome 装点 Markdown 文档 - 少数派
2018-06-13 · via 少数派

使用 Markdown 写文档是件赏心悦目的事情,借此可以专注于内容而非格式。只在最后轻松导出,即可收割一份美观的文档。

相关阅读:想学 Markdown?这篇文章帮你快速上手

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

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

这时,可以在文档写作时引入另一个更丰富的符号工具包 Font Awesome。例如下图是我的一则笔记:

在文档中使用 Font Awesome

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

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

准备工作

要在 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">

其中最后一行是表示此文档需要导入 Font Awesome 最新版本 5.0.13(截止至 2018.06.11)的图标符号,前面的四行是用于将 Font Awesome 4.x 版本的语句转化为 5.0.13 版本。这是因为在 2017 年年底发布的 5.0 版本中,对 4.x 版本的大量图标符号的名称进行了重写,加上此四行就可以同时使用 4.x 和 5.x 版本的语句。

插入符号

之后就可以直接插入各类 Font Awesome 符号了,其基础用法是:

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

这表示一个微信图标的符号。直接把它写入文档中即可在编译时得到如下效果:

微信和微博图标符号

获取符号名称

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

获取人人图标符号

获取了常用的符号名称,就可以把它保存在 TextExpander 或 LaunchBar 的 Snippets 等缩写工具中,以备之后快速调用。

还有一个更简单的方法,LaunchBar 中自带了一个 Font Awesome Icons 的动作,可以在其中直接搜索 Font Awesome 符号的写法,具体步骤是:

  1. 通过缩写如 FONT 检索到 Font Awesome Icons 动作,回车选择;
  2. 通过缩写检索目标符号,如 GOOGLE
  3. 找到后按  方向键,在出现的列表中移动光标至右边标记为 HTML 的一行,按 ⌘Command-C 复制,再在文档中贴粘。
LaunchBar 中的 Font Awesome Icons 动作

由于目前这个动作还并未随 Font Awesome 5.0 的发布一起更新,其中只包含了 4.x 中 786 个图标,且采用的是 4.x 版本的写法。这也就是在上文中需要加入将 4.x 版本转化为 5.0 版本的原因。

从此 LaunchBar 动作出复制出来的符号名称,包含了一个 aria-hidden="true" 的代码,它表示在让电脑朗读屏幕内容时,忽略掉此符号,对显示效果没有影响。如果你没有此需求,可保留此代码,也可以删掉。

修改符号格式

使用 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="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 的优点在于简约,同时也局限于简约。

例如要使两张图片并排显示,Markdown 中并不存在相应的语法。好在我们可以使用 HTML 语法来拓展它。如:

<figure class="half">
    <img src="path/to/img1.png" width="265px">
    <img src="path/to/img2.png" width="265px">
</figure>

这样,上面的三张 png 图片就可以并排显示在同一行中。同理,如果要三张图片并排显示,则将第一行中的 "half" 替换为 "third"。如下图所示:

并列排列图片

再例如要隐藏文档中的某一片段,可以在其前后分别加上两行:

<!---
(要隐藏的内容)
-->

即可以用 HTML 中注释的方式把这两行中间的内容隐藏起来。

Markdown 之所以可以通过使用 HTML 语法来进行拓展,是因为在把 Markdown 文档编译成 HTML 文档的过程中,这些 HTML 的语句直接写在了 HTML 文档中,可以对其内容格示进行直接调节。

借助这个特点,可以大大拓展 Markdown 文档对内容的操作性。本文就是通过这个思路,实现在 Markdown 文档中输入 Font Awesome 的各类图标。

支持的常见编辑器

除了 MWeb,很多纯文本编辑器如:

  • Ulysses
  • Byword
  • Day One
  • Day One Classic
  • nvALT
  • Sublime Text
  • Visual Studio Code

也都支持本文介绍的方法。

但在 Ulysses 中使用本文介绍的方法时,还需要在最开始加入文档的代码块的每一行前加上 ~~ 标示出来,而在行内插入符号时,在其代码前后各加一个波浪号 ~ 即可:

在 Ulysses 中使用 Font Awesome

在写 Markdown 文档时使用 Font Awesome,则可以使生成的文档生动不少,使标示的内容更加醒目。如果你是 Markdown 的使用者,则不妨一试。