给网站配上中文社交媒体图标

烦恼的开始

做网站的时候总会遇到这么个问题：想在页面上放几个社交媒体的链接，但用的图标库里根本没有。

常见的图标库像 FontAwesome、Heroicons 之类的，虽然很专业，但主要面向海外市场。想找微博、小红书、抖音、快手这些的图标？搜遍了都不全，有时候只能手动找 SVG 或者自己画，太麻烦了。

反正就是：

• 😤 FontAwesome 有微博但没小红书
• 😤 Heroicons 基本没有社交媒体图标
• 😤 自己找图标费时又不专业

有没有更简单的办法呢？

柳暗花明：发现了好东西

后来我无意中发现，草料二维码这个网站上有个比较完整的图标库。打开浏览器的开发者工具一看，发现他们用的是一套叫 clifont 的自家图标字体。

一番挖掘后，我找到了这个图标库的源头。这不就是我一直在找的东西吗？完整、专业、还全是中文社交平台的图标。

怎么用？其实很简单

第一步：下载字体文件

curl -o font.woff2 "https://static.clewm.net/cli/iconfont/font.woff2"
curl -o font.woff "https://static.clewm.net/cli/iconfont/font.woff"
curl -o clifont.css "https://static.clewm.net/cli/iconfont/index.min.css"

第二步：放进项目里

把这些文件放到项目的 public/fonts/clifont/ 目录，然后在 HTML 或 CSS 里引入：

<link rel="stylesheet" href="/fonts/clifont/clifont.css" />

第三步：开始用（可选）

如果想更方便地使用，可以写个 React 组件：

const CliIcon = ({ icon, size = 'md', color, className = '', ...props }) => {
  const sizeStyles = {
    sm: '14px',
    md: '16px',
    lg: '18px',
    xl: '24px',
  };

  return (
    <span
      className={`clifont anticon-{className}`}
      style={{ fontSize: sizeStyles[size], color }}
      {...props}
    />
  );
};

然后就可以这样用：

<CliIcon icon="weibo-2" size="lg" color="#E6162D" />
<CliIcon icon="xiaohongshu" size="xl" />

支持的图标

支持的图标还是比较多的，主要有这些：

• 微博: anticon-weibo-2
• 小红书: anticon-xiaohongshu
• 抖音: anticon-douyin-2
• 快手: anticon-kuaishou-2
• B站: anticon-bilibili-2
• 知乎: anticon-zhihu-2
• 微信: anticon-weixin
• QQ: anticon-qq
• GitHub: anticon-github

还有很多，基本涵盖了国内所有主流的平台。

就这么简单

说实话，这个方案就是这么简单。一套完整的字体文件，加载一次就能用所有图标，快速、轻量、还很专业。

以前为了这么一个功能折腾了半天，现在直接拿过来用就行。有时候最好的解决方案确实就藏在身边。

如果你也在找中文社交媒体的图标，这个应该能帮上忙。