zoukankan      html  css  js  c++  java
  • 装饰 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-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

  • 相关阅读:
    linux环境开机自启动nginx
    linux下启动weblogic
    oracle 数据库服务名怎么查
    关于 CSS3 backface-visiable 与 overflow 属性的冲突
    iframe 通信之坑
    npm i --save & npm i --save-dev
    window.blur/focus & document.hasFocus()
    mac zip 命令行 终端压缩加密文件
    audio之autoplay
    JAVA 重写&重载/多态/抽象类/封装/接口/包
  • 原文地址:https://www.cnblogs.com/q735613050/p/9956763.html
Copyright © 2011-2022 走看看