字体图标使用

字体图标

1，为什么要使用字体图标？

• 字体图标是文本属性，可以更改文本样式达到更改效果
• 字体图标兼容性好，与传统图片图标相比更加轻量级
• 多用在小图标中！！

2，如何使用字体图标呢？

• 首先我们需要下载字体图标

1. 在icomeen，是一个外网可能会有点慢！ http://icomoon.io
2. 在阿里的iconfont http://www.iconfont.cn/

• 这里我们以阿里为例：

1. 选好你喜欢的图标，下载文字代码

2. 可以看到压缩包里面有一个demo文件（使用说明书）

   

3. 一般都可以使用Font class方法，调用.css文件就行（但这里需要标签调用）

3，特殊使用-伪元素选择器中

• 由于这里不能新建标签，所以我们使用UNICODE(16进制字符实体/转义字符)

第一步：拷贝项目下面生成的@font-face(到style中）

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

第二步：将定义使用iconfont样式中的设定拷贝到伪元素中

div::after {

            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

            content: "\e64f";
        }

• 这里css的content接受16进制的 Unicode编码，但不能写作实体字符**&#xe64f**；（实体字符只用在html页面中！！： &# 是开头用以标明这是字符实体，x表示这是十六进制）