其实很简单
第一步 去阿里巴巴字体图库 http://www.iconfont.cn/下载你需要的图标
注意要svg格式的
第二步 去制作字体网站 https://icomoon.io/app/#/select 选择你下载好的svg图片,点击import icon
第三步 选择好之后,单击“Download”下载字体包到你的电脑上。他有一个字文件夹包含了字体本身(woff,eot,ttf格式),以及一个HTML示例页面和相应的CSS
最后一步 将font文件夹复制到你的网站,为你的项目添加字体。你需要从style.css文件中复制CSS样式,并粘贴到你网站的CSS文件中,但是我的方法是将它重命名为font.css,并保持他作为一个单独的CSS文件。你需要的时候在把这个CSS文件引入到你的HTML中。
唯一遗憾的是png不能直接导为字体图标,好像有一个小工具能把png转为svg文件,但我感觉太麻烦,就没用,如果想要svg文件,不如直接用ai画图标。ai可以直接保存为svg文件
忽然想到一点,如果你用的有bootstrap,字体图标可能会发生冲突,你只需简单修改一下css即可
修改前
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-export:before {
content: "\e903";
}
修改后
[class^="wdlicon-"], [class*=" wdlicon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wdlicon-export:before {
content: "\e903";
}