CSS3-字体图标的使用

字体图标具有轻量、灵活、兼容性强的特点；比图片有较好的可编辑性，占用空间小、可复用性强，从而被广泛使用。

下面详细介绍一下字体图标的下载：

• 首先要到一些字体图标库网站去下载需要的字体图标，一般 阿里巴巴矢量图标库 中都能找到自己需要的图标

• 进入网站后进行登录，没有账号注册后再登录即可
  

• 登录完成后在搜索栏中搜索自己需要的图标或直接在图标库 中查找
  

• 找到需要的图标后将其加入购物车
  

• 点击网页右上方的 购物车 即可查看或下载加入的字体图标
  

• 选择 下载代码 将字体图标文件下载到本地
  

字体图标的使用：

• 解压之前下载好的压缩文件，复制其中的几个文件到自己的字体文件夹中
  

• 打开 demo_index.html 文件按照上面的步骤进行操作

  第一步：在需要使用字体图标的页面中引入字体文件，声明一种字体，修改文件路径

  <style>
  @font-face {
    /* font-family 定义字体的名称 */
    font-family: 'myfont';
    /* 引入相关文件，将路径改为自己的实际路径 */
    src: url('./fonts/iconfont.eot');
    src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'),
      url('./fonts/iconfont.woff2') format('woff2'),
      url('./fonts/iconfont.woff') format('woff'),
      url('./fonts/iconfont.ttf') format('truetype'),
      url('./fonts/iconfont.svg#iconfont') format('svg');
  }
  </style>
  

  第二步：设置需要使用字体图标的标签的 font-family 为自己定义的字体名称；或者直接定义一个类名，使用字体图标时先给元素添加个类名。

  h3,
  p {
    font-family: 'myfont';
  }
  .iconfont {
    font-family: 'myfont';
  }
  

  每个字体图标都有对应的编码（demo_index.html 文件可查看对应编码），将编码拷贝到标签中即可使用了
  

  <h3>&#xe641;</h3>
  <p>&#xe617;</p>
  <h1 class="iconfont">&#xe612;</h1>
  

  效果：
  

• 也可以使用 类+伪元素 的方式来使用字体图标，举个例子：

  比如想要使用 手机 图标，可以定义一个类选择器并为这个选择器添加伪元素；使用相关图标时直接给标签添加类名即可

  .phone::before {
  	 /* content 中的内容为字体图标的编码，需要去掉前缀 &#x 和后面的分号 */
      content: '\e641';
      font-family: 'myfont'
    }
  

  <h1 class="phone"></h1>
  

  

• 也可以使用 font class 的方式来使用字体图标

  

  首先将 iconfont.css 文件复制到项目文件夹中，然后在使用字体图标的文件中引入该文件；通过类名的方式来使用字体图标，需要注意的是使用字体图标的标签必须要添加一个前缀类名 iconfont

  主要代码示例：

  <!-- ... -->
  <!-- 引入字体图标样式文件 -->
  <link rel="stylesheet" href="./css/iconfont.css">
  <!-- ... -->
  <!-- 使用字体图标 -->
  <p class="iconfont icon-wode"></p>