企业官网建设流程全解析

3 分钟上手 Remix Icon：3100+ 免费开源图标，装完就能用

【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIcon

Remix Icon 是一款中性风格的开源图标库，3100+ 个免费商用图标都带 line / fill 两种变体。它是一套开源图标字体，装完一条命令，写一行标签，页面里立刻有图标。

⚡ 装好只用 30 秒

先装包：

npm i remixicon --save

然后在 HTML 里引入 CSS、用 class 名调用：

<link rel="stylesheet" href="node_modules/remixicon/fonts/remixicon.css"> <i class="ri-home-line"></i>

看到房子图标了？就成了。不想走 npm 的话，直接引一份 CDN 上的 remixicon.css 也行；需要源码的话克隆仓库即可：

git clone https://gitcode.com/gh_mirrors/re/RemixIcon

图标字体和 CSS 类名一一对应：ri-前缀 + 图标名，后面跟-line是线性版、-fill是填充版，同名的两个版本随便挑。

3100+ 图标，怎么快速找到你要的那个？

图标按场景分目录放在icons/下，高频的几个长这样：

习惯成自然之后，找图标就三步：

1. 按分类浏览icons/目录，先进最像的那一类；
2. 在线预览确认样式满意，复制对应的 class 名；
3. 贴进 HTML 的<i class="...">里，完事。

找不到的时候换个目录再翻一轮基本就中了，命名都很直白，arrow-开头是箭头，mail-开头是邮件，很少摸不到意思的。

🎨 让图标听你的话

颜色跟文字一样用color控制，大小跟字号一样用font-size控制，一行 CSS 就能改：

.ri-home-line { color: #ff6b6b; /* 改颜色 */ font-size: 24px; /* 改大小 */ }

因为本质是字体，图标天然继承父元素的文字样式，所以做"图标 + 文字"混排的按钮、标签特别省事。需要描边粗细、多色等精细控制时，icons/目录下每个图标都有现成 SVG 文件，直接拷出来改就行。

去仓库点个 Star，然后打开你的项目试一个图标。

【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIcon