企业官网建设流程全解析

Remix Icon 快速上手指南：3200+ 开源图标库，免费商用

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

Remix Icon 是一套开源的中性风格图标系统，收录 3200+ 图标，全部基于 24x24 网格绘制，每个图标都提供 -line（线性）与 -fill（面性）两个版本，个人与商业项目均可免费使用。读完本文，你能在 10 分钟内完成安装、在页面里嵌入图标，并改掉它的颜色与大小。

扫一眼图标库：20 个分类覆盖大部分界面场景

界面要放导航箭头，Arrows 目录里有上下左右、双向箭头、角落折角箭头全套；做数据后台，Business 分类给了图表、日历、公文包；做聊天应用，Communication 分类把会话气泡、语音、视频通话都备齐了。一共 20 个分类目录：Arrows、Buildings、Business、Communication、Design、Development、Device、Document、Editor、Finance、Food、Game & Sports、Health & Medical、Logos、Map、Media、Others、System、User & Faces、Weather，常见界面场景基本翻得出对应图标。

风格上是中性路线，统一 24x24 网格、线条粗细一致，放进现有组件旁边不突兀、不抢戏。全部图标遵循 Remix Icon License v1.0 协议，个人和商业项目都能免费用，不用纠结授权问题。

两种拿到方式：npm 安装或克隆仓库 📥

有前端构建工具时，在项目里执行一条命令即可：

npm install remixicon --save

装完后fonts/目录是 CSS 与字体文件，icons/是全部 SVG 源文件。

如果只想要图标资源本身，直接克隆仓库：git clone https://gitcode.com/gh_mirrors/re/RemixIcon。两者都不想碰时，把 remixicon.css 和同目录下的字体文件拷进项目静态目录、在 HTML 里引用它就行，零构建依赖。

把图标嵌进网页的三步

1. 在页面 head 引用 fonts/remixicon.css，或用 JS 导入它。该文件里声明了 @font-face，浏览器会按需加载 woff2/woff/ttf 字体。
2. 需要图标的地方放一个 i 标签，写上对应的 class，字形即显示。
3. class 命名规则为 ri-{名称}-{风格}：-line 是线性款，-fill 是面性款。比如搜索图标写作 ri-search-line 或 ri-search-fill，不确定名称时直接查 remixicon.css 里的类定义。

<link rel="stylesheet" href="node_modules/remixicon/fonts/remixicon.css"> <i class="ri-home-line"></i> <!-- 线性 home --> <i class="ri-search-fill"></i> <!-- 面性 search -->

用 CSS 改图标颜色和大小 🎨

图标本质是字体字形，继承文本属性，所以多数情况你只调两样：

• 颜色：给元素设置 color 属性，图标跟着变色，例如color: #ff6b6b。
• 大小：改 font-size，比如font-size: 24px，图标按字号等比缩放。
• 嫌麻烦时直接加内置的辅助类 ri-lg、ri-xl，一键放大，不用额外写 CSS。

需要改图标形状本身（圆角、线条粗细）时，换 SVG 方式：从 icons/ 对应分类目录取文件，例如 icons/Arrows/arrow-right-line.svg，内容可直接粘进 HTML，宽高用 width/height 属性控制，填充色也能随意指定。

资源目录导览：fonts 与 icons 各管一摊

仓库资源分两大块，对照下表取用：

用 Less 或 SCSS 写样式的项目，可把 fonts/ 下的预处理版本直接接进自己的样式体系，图标类名随主题变量一起管理。

常见坑提醒与下一步清单

三个容易踩的坑：

• 类名前缀是 ri-。v2.0.0 之前用过 remixicon- 前缀，旧前缀现已失效；找不到图标时先查前缀。
• -line 与 -fill 别搞混：前者线性、后者面性。同一页面想切换风格，换后缀即可。
• 商用免费，但 License 里的署名要求要保留。

接下来可以动手：

1. 安装依赖并引入 CSS，图标即刻可用。
2. 找具体图标时，先按分类在 icons/ 目录下翻，再对照 remixicon.css 里的 ri- 类名。
3. 做设计协作时，直接从 icons/ 分类目录拿 SVG 源文件，导入 Sketch、Figma 等工具二次编辑。

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