##iconfont中追加矢量图标
在页面不断的更新改变的过程中以及在码页面的时候,避免不了的会遗落一些的iconfont图标,这个时候应该怎么办?
方法一
这个方法是最不需要动脑但是确实最low和最麻烦的方法就是直接在重新下载新的iconfont文件跟换就的文件
方法二(推荐使用的方法)
增加之前的iconfont文件目录
图一
增加之前的iconfont.css中的代码
代码块一
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1638183563598') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-a-doubleright:before {
content: "\e624";
}
.icon-a-doubleup:before {
content: "\e625";
}
.icon-a-doubledown:before {
content: "\e626";
}
新增加confront开始步骤
第一步:在iconfont的官网上找到对应新增的矢量图标
官网地址(https://www.iconfont.cn/)
图二:
点击下载代码,将代码下载到本地
第二步:
将下载好的矢量图标的文件移到font文件中;更改后缀(避免文件重名),
第一种就是上面的文件中只用.ttf文件,就只需要将下载的新的文件(图四)中.ttf文件改名(iconfont-zx.ttf)即可新的目录如下
图三:
图四
之后我们将新下载的文件(图四)中的iconfont.css中的代码粘贴到(图三)中的iconfont.css文件中;最终得到的iconfont.css中的代码为(即代码块一更新如下)
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1638183563598') format('truetype');
}
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont-zx.ttf?t=1638184427387') format('truetype');
} // 引入新的iconfont-zx.ttf文件
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-a-doubleright:before {
content: "\e624";
}
.icon-a-doubleup:before {
content: "\e625";
}
.icon-a-doubledown:before {
content: "\e626";
}
.icon-a-ziyuan8:before { // 新的iconfont
content: "\e605";
}
第三步:
已经可以使用新添的图标了
<i class="iconfont icon-a-ziyuan8"></i> // class中一定要包含iconfont
以下是另一种情况上面的文件中不仅仅有.ttf文件可能还有.woff;.woff2;.eot;.svg文件更新的方法和上面只有一个文件的方法是一样的(保留需要的文件.woff;.woff2;.eot;.svg)即可
其中有四个文件是必要的其他的都可以不要
其中
这四个文件是必要的,iconfont-zx.woff2这个文件需不需要是要看你的iconfon.css文件中
有没有使用woff2看iconfont.css文件中有没有在@font-face 的src中引入woff2
@font-face {
font-family: "iconfont";
src: url('iconfont.woff2?t=1638184427387') format('woff2'),
url('iconfont.woff?t=1638184427387') format('woff'),
url('iconfont.ttf?t=1638184427387') format('truetype');
}
即为使用了woff2