跳转至

在网页中插入图标\#

这篇文章是对 🔗About the site 的扩展, 包含了

写在前面\#

我们在浏览网站的时候，会发现别人写的Markdown文档为什么这么好看，有各种各样的效果和图案，为什么我的就没有？我连字体大小颜色都还没玩明白，别人是怎么在文章里插入这么多图标的？

经过我的一番查资料和思考，我总结了以下两个较为靠谱且满足需求的方法

当然，这里直接在markdown文档里放图片链接不算，因为既没有用到资源库自带的功能，也不如图标显示大小、风格统一和可调用性

这里我使用的是阿里巴巴矢量图形库

速查： 我的图标库

引用方法：

<svg class="icon" ><use xlink:href="#icon-bilibili"></use></svg>

方法1: CSS (不推荐)\#

使用CSS的方法引用相较来说会方便一点

image-20240329211822222

如上图，我们进入仓库，选择Font class，生成代码后可以发现链接的结尾是.css，这就表明我们生成的链接其实是一个样式表

我们只需要在html标签的<head>标签中引入这个CSS资源

<head>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4487739_88dnmcbf2pa.css">
</head>

然后我们只需要用<i>或<span>标签加上类名就可以引用图标了

<i class="iconfont icon-bilibili"></i>
<span class="iconfont icon-youtube"></span>
这里==>
不过...我们也能明显看出来显示的图标有什么问题🤔它们没有颜色🌈！

当然，我们可以通过以下两种方法来给图标添加颜色 - <font color="">(这种方法有点过时) - <i class="iconfont icon-<...>" style="color: <color>"></i>(支持场景更多，但是写起来有点麻烦)

这样我们就得到了红色小电视和蓝色YouTube！

不过这种方法还是有它的优点的，根据阿里的文档font-class本质还是unicode使用方式的一种变种，也就是说它使用的还是字体，因此不支持颜色，对于不需要颜色或者颜色单一的情况下，使用CSS引入图标还是很好的，因为它的引入方式足够简洁

方法2: JS + CSS (推荐)\#

下面这种方法将会解决上面无法显示颜色的痛点，并且还可以调整颜色和大小！

首先我们再回到这个界面

image-20240329213405186

这次我们选择Symbol，生成代码我们发现这次的结尾是.js，也就是说我们这次引入的链接是正儿八经的JavaScript编程语言了

这次我们需要用<script>标签来引入js文件，此外，我们这次引入的图标已经跟刚刚的不一样了，我们刚刚通过CSS引入的是文字，而现在我们引入的是矢量图svg文件，因此我们需要使用CSS来规定它们的大小和显示方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//at.alicdn.com/t/c/font_4487739_gyxcnbnyjth.js"></script>
    <style type="text/css">
        .icon {
            width: 1em; height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .icon-large {
            width: 3em; height: 3em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <svg class="icon" >
        <use xlink:href="#icon-bilibili"></use>
    </svg>
</body>
</html>

在这段代码中，我定义了两种图标尺寸，因为这段CSS代码是内嵌在这个markdown文档中的，而这个markdown文档经过blog框架选然后最后会成为html文件，以它该有的姿态显示在你的眼前（在我的眼里也许它就没有那么优雅了），你会注意到，表格里的图标明显比我在文档中的其他地方使用的要大，这正是两套CSS样式的好处

在声明了<head>之后，直接在文件里使用<svg>标签就可以正常使用

当然，也可以采用内联样式 

<svg class="icon" style="width: 5em; height: 5em;"><use xlink:href="#icon-bilibili"></use></svg>

嵌入blog框架\#

可以发现到这里我们在做的都是对CSS样式的修改，这个页面在html中支持得很好，正如你所看到的，但在一般的Markdown编辑器中，图标是不可显示的，在Typora中甚至不堪入目，有很多白色代码框🤣因为有大段大段的html无法正常解析内容，而且像上面那样的html代码在每篇文章中都需要声明一次，未免有些过于繁琐，并且维护性也不好，如果你对图标库有了新的更改，链接就可能失效，一个一个改既麻烦，又容易出错

因此如果你是在使用Hexo blog框架，使用下面的方法将图标嵌入到blog框架中

1. 创建CSS文件

将上面的CSS代码拿出来

.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
.icon-large {
    width: 3em; height: 3em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

在blog目录下的主题配置文件夹中找到source，在source中会有一个CSS文件夹，我们创建一个新的CSS文件：icon-import.css，然后将上面的代码复制到文件里面就可以了

2. 引入CSS文件

在你的主题配置文件夹中找到inject，在这里我们可以把我们想要加入的东西插入到最后生成的html文件的<head>或<body>中，在这里，我们只要在head下加入这么一行即可：

- <link rel="stylesheet" href="/css/icon-import.css">

需要注意这里的语法是列表形式

3. 引入js文件

我们可以直接复制iconfont给我们的链接，然后按照2的方式加上

- <script src="//at.alicdn.com/t/c/font_4487739_gyxcnbnyjth.js"></script>

如果你考虑稳定性，并且不想每次图标库变动都重新修改，你可以将这个文件中的内容粘贴到本地，和2的做法一致

- <script src="/js/icon-import.js"></script>

至此，我们就可以直接通过<svg>标签直接引用图标了

References\#

如果你想添加或更改的是网站logo，请参考下面的🔗链接