8.字体图标 iconfont使用1.使用步骤 https://www.iconfont.cn/ 注册账户 2

1.使用步骤 www.iconfont.cn/ 注册账户 2.搜索图标

3.点击图标---添加道购物车

4.购物车--下载到代码

5.会生成一个文件包--

6.可以打开doem.html看一下说明

7.使用Unicode 编码 Unicode 使用步骤如下：可以直接引入CSS样式、

第一步：拷贝项目下面生成的 `@font-face`

@font-face { font-family: 'iconfont'; src: url('iconfont.woff2?t=1653269855972') format('woff2'), url('iconfont.woff?t=1653269855972') format('woff'), url('iconfont.ttf?t=1653269855972') format('truetype'); }

2.### 第二步：定义使用 iconfont 的样式

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

3.### 第三步：挑选相应图标并获取字体编码，应用于页面

font-class 引用

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-zhihuilouyu"></span>

9.## Symbol 引用这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

第一步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }

第三步：挑选相应图标并获取类名，应用于页面：

 <svg class="icon"  aria-hidden="true"> 
           <use xlink:href = '#icon-louyuzidonghua'>  </use>
   </svg>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content=" 我是网页的描述，可以写的比较多">
    <meta name="keywords" content="我是关键字，关键字，就5个">
    <title>我是网页的标题，会显示出来</title>
    <link rel="stylesheet" href="iconfont.css">
    <script src="iconfont.js"></script>
    <style>
      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        /*  这样可以方便自己修改样式 */
        color: pink;
      }
      </style>
</head>
<body>
   <svg class="icon"  aria-hidden="true"> 
           <use xlink:href = '#icon-louyuzidonghua'>  </use>
   </svg>

</body>
</html>

8.字体 图标 iconfont使用

第一步：拷贝项目下面生成的 @font-face

font-class 引用