字体图标

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

简介

字体图标，文件小且是矢量的。

对于不同的字体，实际上是键盘上的字符对应不同的矢量图。因此，可以作自定义的矢量图，使每张图对应不同的编码，通过修改字体font-family、使用编码找到相应的矢量图。

制作——icomoon

https://icomoon.io/->->(选择.svg文件，导入自定义的图标)

->选中自定义图标及要使用的网站预定义图标，点击Generate Font

->点击Preferences设置类名和前缀，也可修改编码->Download

字符编码默认从e900开始，不跟特定字符冲突，例如如果设置为61，则a对应该字符。

使用

style.css文件内容如下。可以引入（link）或拷贝（自己的css文件）到自己的项目中，注意url地址的改变。

::before是伪元素选择器，最好使用两个冒号。::before的使用不是必须的，也可以将content内容即字符编号直接添加在html元素的内容中i{font-family:'myFontfamily';}  <i>&#59648;</i>，只是为了避免记忆编号，使用::before这种方式。

扫描二维码关注公众号，回复： 3432451 查看本文章

@font-face {
  font-family: 'myFontfamily';
  src:  url('fonts/myFontfamily.eot?bxc84n');
  src:  url('fonts/myFontfamily.eot?bxc84n#iefix') format('embedded-opentype'),
    url('fonts/myFontfamily.ttf?bxc84n') format('truetype'),
    url('fonts/myFontfamily.woff?bxc84n') format('woff'),
    url('fonts/myFontfamily.svg?bxc84n#myFontfamily') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'myFontfamily' !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-logo:before {
  content: "\e900";
  color: #666;
}
.icon-weijinsuo:before {
  content: "\e901";
  color: #4d4d4d;
}
.icon-home:before {
  content: "\e902";
}
.icon-newspaper:before {
  content: "\e904";
}
.icon-quill:before {
  content: "\e907";
}
.icon-headphones:before {
  content: "\e910";
}
.icon-music:before {
  content: "\e911";
}

<i class="icon-weijinsuo"></i>

Bootstrap也有字体图标，如果使用Bootstrap可以直接添加类。