使用 @font-size

image2021-10-26_15-42-22.png

，也可以选择添加至项目，这样会创建一个自定义文件夹，方便你后续新增下载图标

（2）解压下载代码后打开文件夹，把红色框中后缀为.ttf,woff,woff2的文件放入你项目中的font文件夹，红色圈的iconfont.css放入你项目中的css文件夹

image2021-10-26_15-45-15.png

（3） 在项目中引入iconfont.css

image.png

在页面中如下图使用字体图标对应class即可

image.png

（4）如果按照上述步骤依然无法显示字体图标，看看iconfont.css中红色框部分路径是否改为了你项目的路径
改之前：

image.png

改之后：

image.png

（5）如果此时仍然无法显示字体图标，看看是不是下面这种情况**

下载代码后默认confront.css的@font-face如下显示

image.png

上面我也说了，需要把url里的默认路径改为我们本地的路径，关键来了，不要像下面这样改，就是不要看到format里面是woff2,

就把前面字体文件路径引入woff2，后面依次类推

image.png

就按照引入字体文件路径时默认弹出的这个顺序引入即可

image.png

image.png

(6) 另外，如果你按上述步骤创建了自定义项目文件夹，并下载了所需字体图标，后来项目需要又要增加新的字体图标这种情况，

需要把新增字体图标也放进之前创建的自定义项目文件夹，然后重新下载代码，并替换下面字体文件和confront.css

image.png

使用SVG

1. 插入svg标签, 直接使用 <svg> 标签插入内容到网页中，成为DOM的一部分，然后可以使用CSS和JS进行控制。

   <svg width="400" height="300" id="testSvg">
   <circle cx="100" cy="100" r="50" id="testCircle">
   <animate attributeName="cx" from="100" to="300" dur="2s" repeatCount="indefinite"></animate>
   </circle>
   </svg>

   //可以用JS操作SVG，制作简单的动画等

   <script type="text/javascript">
   var circle = document.getElementById("testCircle");
   circle.addEventListener("click", function(e) {
   console.log("Click circle ...");
   circle.setAttribute("r", 65);
   }, false);
   </script>

   效果：
   image.png

   2\. 插入svg文件： 可以使用 `<img>` `<embed>` `<object>` `<iframe>` 等标签把SVG文件插入到网页中。

     //使用<img>标签
     <img src="test.svg'" />
    //或者SVG的base64编码
    <img src="data:image/svg+xml;base64,[data]" />

    //使用<embed>标签
    <embed id="embedSvg" type="image/svg+xml" src="test.svg"></embed>
    //获取SVG DOM
    var embedSvg = document.getElementById("embedSvg").getSVGDocument();
    console.log("SVG DOM: ", embedSvg);

   //使用<object>标签
   <object id="objectSvg" type="image/svg+xml" data="test.svg"></object>
   //获取SVG DOM
     var objectSvg = document.getElementById("objectSvg").getSVGDocument();
    console.log("SVG DOM: ", objectSvg);

    //使用<iframe>标签
   <iframe id="iframeSvg" src="test.svg"></iframe>
   //获取SVG DOM
   var iframeSvg = document.getElementById("iframeSvg").contentDocument;
   console.log("SVG DOM: ", iframeSvg);

  3.把svg作为其他网页元素的背景图片： 这是一种变相的把svg插入网页的方式，即把svg作为普通的图片使用，无法展示动画效果。

     <style type="text/css">
     .svg-div {
        width:400px;
       height:300px;
       background:url("test.svg") no-repeat center / 50%;
       border:1px solid #ccc;
      }
     </style>

     <div class="svg-div"></div>

  4.读取svg源码： 因为SVG文件实质上就是一段XML文本，因此可以通过读取XML代码的方式，读取SVG源码

     var svgStr = new XMLSerializer().serializeToString(document.getElementById("testSvg"))