till.win 域名出售了

《Monitoring Technology and Insurance Market》读书笔记

再见，GitHub



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

## 烦恼的开始

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

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

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

有没有更简单的办法呢？

## 柳暗花明：发现了好东西

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

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

## 怎么用？其实很简单

### 第一步：下载字体文件

```bash
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 里引入：

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

### 第三步：开始用（可选）

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

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

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

然后就可以这样用：

```jsx
<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`

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

## 就这么简单

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

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

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


适合中国宝宝的社交媒体图标库

解决中文本土社交媒体图标缺失问题，从cli.im获取完整图标库并部署到React项目