• 前言

网上的ICON库有很多,但是实际使用上的话只能用上几个,那我们如果把那些允许个人使用的ICON图标集成一下,这样就可以节省很大的空间,提升网络访问速度,并且自己设置命名规则,可以有效的防止CSS命名冲突。

  • 注意

当然在使用这些图标的同时,一定要看清楚,这些图标库遵循哪些开源条约,一定要看清楚,以免日后引起不必要的法律责任,当然如果是个人使用的话,一般开源都是允许的,只要不用于商业,基本都是没有什么问题。

  • 介绍

什么是图标?
图标就是具有指代意义的具有标识性质的图形。而这里我只用Svg当作模板来讲解如何集成Icon图标库。
什么是Svg?
SVG代表可缩放矢量图形,它是网络上使用最广泛的矢量文件格式。因为Svg是一种可缩放的图形,所以市面上的图标库大多数都是默认使用的Svg,因此我这里也用Svg作为模板。

  • 正文

首先找到自己喜欢的Svg图标,我这里给出一个自己集成过的Svg图标。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path fill="none" d="M0 0h24v24H0z"/>
  <path d="M19 21H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1zM6 19h12V9.157l-6-5.454-6 5.454V19z"/>
</svg>

在桌面新建一个文本文档,像我这样把Svg放上去。

Svg输入方法
Svg输入方法

然后保存之后,将文件的后缀改为Svg,保存之后,我们在浏览器中打开这个文件,就能看到这个Svg文件是否可以正常使用。
Svg正常使用
Svg正常使用

如果像我这样可以显示出来,就是Svg可以正常使用了,然后我们如何像网上那些图标库一样使用呢???
首先,我们将svg名字命名为自己喜欢的名字,我建议这里命名为英文,否则CSS在引用的时候可能会出现小问题。

我们创建一个图标库的文件夹,这里的名字无所谓,就是创建的文件夹更容易我的教学跟你学习。然后在这个文件夹里面在创建一个新的文件夹,这个文件夹的名字可以是数字和英文,可以中文,但是我不推荐!!!然后将我们刚才的Svg文件存放到这个文件夹里面。然后开始编写CSS文件。

.yan {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto; 
}
.yan-home {
    content: url(/Svg/home.svg);
}

上面的命名中的.yan.yan-home这两个定义CSS的名字。那么到这里我们的图标库已经建好了,接下来的任务,就是你自己去补充扩建它,毕竟如果只有几个图标......那也没有啥用。

接下来就是我们如何去使用他呢????
在文件里面用li标签,然后把他的类名设置成咱们刚才设置的yan yan-home,然后就是前面的yan yan-home是什么,是前面的命名,然后如果在前面更改的话,后面也要更改。

文件位置
文件位置

使用代码
使用代码

成功预览
成功预览