如何在Docusaurus中添加在线CSS以使用Academicons图标

有两种简单的方法可以完成这个需求：

方法一：通过docusaurus.config.js配置头部标签 #

直接在项目的配置文件中设置HTML头部标签，这是最贴合Academicons官方要求的方式：

1. 打开项目根目录下的docusaurus.config.js文件
2. 在配置对象中添加headTags数组，写入Academicons的CSS链接配置：

module.exports = {
  // 保留原有其他配置项
  headTags: [
    {
      tagName: 'link',
      attributes: {
        rel: 'stylesheet',
        href: 'https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css',
      },
    },
  ],
  // 保留原有其他配置项
};

配置完成后，Docusaurus会自动在生成的所有HTML页面头部插入对应的CSS链接标签。

方法二：在custom.css中通过@import引入 #

如果你习惯用自定义CSS文件统一管理样式，也可以用这种方式：

1. 打开src/css/custom.css文件
2. 在文件最顶部添加以下代码，引入在线的Academicons样式：

@import url('https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css');

3. 确认docusaurus.config.js的presets.theme.customCss已经正确指向这个文件（默认配置通常已包含，示例如下）：

presets: [
  [
    '@docusaurus/preset-classic',
    {
      theme: {
        customCss: require.resolve('./src/css/custom.css'),
      },
    },
  ],
],

验证使用 #

重启Docusaurus开发服务器（执行npm run start），之后就可以直接使用Academicons的图标了，比如：

<i class="ai ai-google-scholar ai-2x"></i>
<i class="ai ai-overleaf ai-2x"></i>

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