使用 @font-size
（1）使用阿里 iconfont 下载代码，如下，也可以选择添加至项目，这样会创建一个自定义文件夹，方便你后续新增下载图标
（2）解压下载代码后打开文件夹，把红色框中后缀为 .ttf,woff,woff2的文件放入你项目中的font文件夹，红色圈的iconfont.css放入你项目中的css文件夹
（3） 在项目中引入iconfont.css
在页面中如下图使用字体图标对应class即可
（4）如果按照上述步骤依然无法显示字体图标，看看iconfont.css中红色框部分路径是否改为了你项目的路径 改之前：
改之后：
（5）如果此时仍然无法显示字体图标，看看是不是下面这种情况
下载代码后默认confront.css的@font-face如下显示
上面我也说了，需要把url里的默认路径改为我们本地的路径，关键来了，不要像下面这样改，就是不要看到format里面是woff2, 就把前面字体文件路径引入woff2，后面依次类推
就按照引入字体文件路径时默认弹出的这个顺序引入即可
(6) 另外，如果你按上述步骤创建了自定义项目文件夹，并下载了所需字体图标，后来项目需要又要增加新的字体图标这种情况，
需要把新增字体图标也放进之前创建的自定义项目文件夹，然后重新下载代码，并替换下面字体文件和confront.css
使用SVG
-
插入svg标签, 直接使用
<svg>标签插入内容到网页中，成为DOM的一部分，然后可以使用CSS和JS进行控制。//可以用JS操作SVG，制作简单的动画等
效果：
2. 插入svg文件： 可以使用 <img> <embed> <object> <iframe> 等标签把SVG文件插入到网页中。
//使用标签
//或者SVG的base64编码
//使用标签
//获取SVG DOM
var embedSvg = document.getElementById("embedSvg").getSVGDocument();
console.log("SVG DOM: ", embedSvg);
//使用标签
//获取SVG DOM
var objectSvg = document.getElementById("objectSvg").getSVGDocument();
console.log("SVG DOM: ", objectSvg);
//使用标签
//获取SVG DOM
var iframeSvg = document.getElementById("iframeSvg").contentDocument;
console.log("SVG DOM: ", iframeSvg);
3.把svg作为其他网页元素的背景图片： 这是一种变相的把svg插入网页的方式，即把svg作为普通的图片使用，无法展示动画效果。
.svg-div { width:400px; height:300px; background:url("test.svg") no-repeat center / 50%; border:1px solid #ccc; }
4.读取svg源码： 因为SVG文件实质上就是一段XML文本，因此可以通过读取XML代码的方式，读取SVG源码
var svgStr = new XMLSerializer().serializeToString(document.getElementById("testSvg"))
