字体图标使用

176 阅读1分钟

下载字体图标

  1. 字体图标的选择和上传(UI美工)
    image.png 具体的步骤:

image.png

使用字体图标

  1. 复制相关文件到fonts文件夹里面。
    image.png
    2.引入css
    <link rel="stylesheet" href="./fonts/iconfont.css">
    或者直接引用线上地址,则不需要下载相关文件(速度够用)

image.png
引用方式
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3312582_hinc4p9zc67.css">
注意:需要加上http://
使用类名引入字体图标(常用)

image.png <span class="iconfont icon-bofangjilu"></span>

  • 第一个类名 iconfont 说明文字是字体图标。
  • 第二个类名 icon-bofangjilu 说明是哪个小图标。 使用unicode编码引入字体图标

image.png
直接在标签内部放入一个编码
<strong> &#xe8ad;; </strong>
在css中声明当前标签的文字是字体图标
strong { font-family: 'iconfont'; }

使用伪元素字体图标
<div class="boji">播放记录</div>
伪元素中使用 .boji::before { content: "\e8ad";}
同样的,需要声明字体图标:font-family: "iconfont"
(非原创,仅作为学习笔记)