Web Icon

Web Icon 即网页图标，亦是我为它取的名字。

在网页中使用图标可以大大增加界面的美观性。

下图 ImQi1 去除了图标的导航栏。

下图为 ImQi1 包含图标的导航栏。

每个文字前的小东西即是图标。

使用 - 引入 CSS

这里提一下，有很多图标库都可以采用本教程的方法，使用的大体步骤都是一样的。

这里以 Remix Icon 为例。前往 Remix Icon 官网，然后点击右上角的下载按钮，然后点击第二个 Icon fonts 右边的下载，不下载 SVG。

下载完成后解压字体文件包，可以发现它主要由 CSS 文件和字体文件构成。CSS 文件用于定义每个特定 class 的 i 标签显示何种图标，而字体文件将图标的样式包含在内。

将 Remix Icon 的字体文件包解压了以后在项目中引用即可，也可以引用本站的在线地址。

截止此教程更新前，Remix Icon 已更新至 4.3.0 版本。

使用 - 挑选图标

前往 Remix Icon 官网后，挑选自己的图标。

如这里我选择第一个图标 arrow-left-up ，点击它。

点击它以后可以看到下面可以复制 SVG、PNG 格式的，中间则标注了如何通过 i 标签来使用它，复制它的代码 <i class="ri-arrow-left-up-line"></i>。

然后在项目中引用即可。

html

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://static.qi1.website/css/remixicon.css">
</head>
<body>
<a href="#"><i class="ri-arrow-left-up-line"></i>文字</a>
</body>
</html>

Web Icon ​

使用 - 引入 CSS ​

使用 - 挑选图标 ​

Web Icon

使用 - 引入 CSS

使用 - 挑选图标