字体图标

获得自己需要的字体图标

  首先进入icomoon.io网站去挑选自己需要的字体图标，该网站的服务器位于外国，所以打开的速度较慢。

  然后会进入下面的页面，你可以在这里选择自己需要的字体图标

  然后进入下载页面进行下载

  下载后会得到一个压缩包

使用字体图标

  将该压缩包进行解压，会得到以下目录结构

  我们将fonts文件夹复制到.html文件同一目录下

  然后创建一个新的字体，在style标签中或者在css文件中写下

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

  这个字体的名字叫做"icomoon",当然这个字体的名字你可以随便起，不过一般我们都是用这个。

  然后现在打开刚刚解压的icomoon文件夹下的demo.html文件

<span></span>

  将字体复制到你需要的地方，这里我放置在span标签中间，然后在css中写下

span {
    font-family: "icomoon";
}

  在浏览器中就可以看到字体图标了

  对于字体图标，可以把它当做字体一样看待，可以改变它的大小，可以改变它的颜色

font-size: 40px;
color: red;