如何创建带外部链接与Font Awesome图标的SharePoint现代列表

根据你的需求，以下几种方法可以干净利落实现带Font Awesome图标的外部URL列表，按场景优先级推荐：

1. 平台原生列表+字段格式化（推荐，适合SharePoint等企业平台） #

如果是在SharePoint这类支持字段自定义格式化的平台操作，直接用JSON格式化URL字段就能实现原生融合的效果，比插入图片或手动写HTML更易维护：

1. 创建包含「标题」和「URL」字段的列表；
2. 进入URL字段的「格式化列」设置，粘贴以下JSON代码：

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "i",
      "attributes": {
        "class": "fa-solid fa-link ms-fontColor-themePrimary"
      },
      "style": {
        "margin-right": "8px"
      }
    },
    {
      "elmType": "a",
      "attributes": {
        "href": "@currentField",
        "target": "_blank",
        "class": "ms-fontColor-themePrimary"
      },
      "txtContent": "@currentField.title"
    }
  ]
}

3. 保存后，列表里的每个URL前都会自动显示Font Awesome的链接图标，样式和平台主题统一，完全不会有笨拙感。

2. Embed Web部件+自定义HTML（高自定义场景） #

如果需要完全控制图标样式、间距等细节，Embed Web部件是合适的选择，直接插入一段HTML代码即可：

<ul style="list-style: none; padding-left: 0; font-size: 14px;">
  <li style="margin-bottom: 10px;">
    <i class="fa-solid fa-globe" style="margin-right: 8px; color: #0078d4;"></i>
    <a href="https://example.com" target="_blank" style="text-decoration: none; color: #0078d4;">示例外部网站1</a>
  </li>
  <li style="margin-bottom: 10px;">
    <i class="fa-solid fa-code" style="margin-right: 8px; color: #0078d4;"></i>
    <a href="https://example.org" target="_blank" style="text-decoration: none; color: #0078d4;">示例外部网站2</a>
  </li>
</ul>

• 替换fa-solid fa-globe这类类名可以切换不同的Font Awesome图标；
• 调整内联样式里的颜色、间距、字体大小，能匹配你的页面风格；
• 大多数平台（包括SharePoint）的Embed Web部件都支持这类纯HTML代码，显示效果整洁可控。

3. Markdown内嵌HTML（纯文档场景） #

如果是在支持Markdown+HTML混合的环境（比如部分知识库、文档平台），可以直接用这种极简写法：

• - <i class="fa-solid fa-link"></i> [示例网站](https://example.com)
  只要平台已加载Font Awesome资源，就能正常显示图标，无需额外配置。

内容的提问来源于stack exchange，提问作者Ginnie2019