教你怎么快速创建字体图标

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34117170/article/details/77583082

其实很简单

第一步 去阿里巴巴字体图库 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";
}