Markdown 支持 Font Awesome 图标

发表于 更新于 分类于 Changyan： 本文字数： 2.6k 阅读时长 ≈ 2 分钟

问题引出：Markdown 编译完为 html 代码，理论上是可以使用 Font Awesome 图标的

🧡Font Awesome 图标

官网地址 https://fontawesome.com/

GitHub首页 https://github.com/FortAwesome/Font-Awesome

一般导入使用 Font Awesome 的方法

  • 在HTML源码中<head></head>标签中添加支持
<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>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
</head>

💙导入到 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>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
</head>

<h2>
    <span>
        <i class="fa fa-hand-point-right"></i>
        <i class="fa fa-heart"></i>
        <i class="fa fa-hand-point-left"></i>
    </span>
</h2>

效果

呕吼...

💖markdown 编辑插件

  • VSCode 插件：Font Awesome Auto-complete & Preview

  • 添加到配置文件settings.json

{
       // Font Awesome version to use.
    "fontAwesomeAutocomplete.version": "5",
    // List of glob patterns that determine where Font Awesome 5 Autocomplete will provide suggestions.
    "fontAwesomeAutocomplete.patterns": [
        "**/*.html",
        "**/*.md"
    ],
    // A word that triggers the autocompletion of Font Awesome icons. Last character of the trigger word is also the trigger character for autocompletion menu.
    "fontAwesomeAutocomplete.triggerWord": "fa-",
    // A list of glob patterns for which the extension should NOT auto-remove the trigger word when a font class name is inserted from the autocompletion list.
    "fontAwesomeAutocomplete.disableTriggerWordAutoClearPatterns": ["**/*.html", "**/*.md"],
    // Background color of a Font Awesome icon preview. Supports any valid CSS color.
    "fontAwesomeAutocomplete.preview.backgroundColor": "#ffffff",
    // Foreground color of a Font Awesome icon preview. Supports any valid CSS color.
    "fontAwesomeAutocomplete.preview.foregroundColor": "#000000",
    // Allows overriding the inserted text per file type when an autocompletion item is selected.
    // Available template placeholders are {style}, {styleName}, {name}, and {prefix}.
    // {name} supports the following formatters: camelCase, kebabCase, pascalCase, and snakeCase. Usage: {name:formatter}, e.g. {name:camelCase}
    "fontAwesomeAutocomplete.insertionTemplate": {
        "**/*.html": "{style} {prefix}{name}"
    },
    // Artificially increases the importance of completion items. Enabled by default as FontAwesome Autocomplete extension only provides suggestions based on the triggerWord setting.
    "fontAwesomeAutocomplete.enableElevatedSortPriority": true
}
  • 效果

-

⚡⚡⚡ OVER ⚡⚡⚡