目录
初步准备
引入方式分为三种：
unicode在线链接：
unicode本地链接：
font-class在线链接：
font-class本地引入方法:
symbol的在线链接引入：
symbol的本地引入：
初步准备
第一步：
第二步：
第三步：
引入方式分为三种：
unicode、font-class、symbol
unicode分为在线链接与本地链接：
unicode在线链接：
<!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" /><title>fontIcon</title><style>/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */@font-face {font-family: "iconfont"; /* Project id 3649984 */src: url("//at.alicdn.com/t/c/font_3649984_sym0ofmipq.woff2?t=1663227506310")format("woff2"),url("//at.alicdn.com/t/c/font_3649984_sym0ofmipq.woff?t=1663227506310")format("woff"),url("//at.alicdn.com/t/c/font_3649984_sym0ofmipq.ttf?t=1663227506310")format("truetype");}.iconfont{font-family: 'iconfont';font-size: 100px;color: red;}</style></head><body><span class="iconfont"></span></body>
</html>
unicode本地链接：
下载完成后，打开解压后的文件夹：
将字体文件放入需要使用图标的网页文件所在的目录中
将css文件中的内容copy到需要字体图标的文件的样式中
<!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" /><title>fontIcon</title><style>@font-face {font-family: "iconfont"; /* Project id 3649984 */src: url("iconfont.woff2?t=1663228358720") format("woff2"),url("iconfont.woff?t=1663228358720") format("woff"),url("iconfont.ttf?t=1663228358720") format("truetype");}.iconfont {font-family: "iconfont" !important;font-size: 50px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-xiaoqiche:before {content: "\e65e";}</style></head><body><span class="iconfont"></span></body>
</html>
font-class在线链接：
<!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" /><title>Document</title><link rel="stylesheet" href="//at.alicdn.com/t/c/font_3649984_sym0ofmipq.css"></head><body><span class="iconfont icon-xiaoqiche"></span></body>
</html>
font-class本地引入方法:
将红色框中的文字文件引入到目标文件夹
symbol的在线链接引入：
<!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" /><title>Document</title><script src="//at.alicdn.com/t/c/font_3649984_sym0ofmipq.js"></script><style type="text/css">.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head><body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiaoqiche"></use></svg></body>
</html>
symbol的本地引入：
将下载后的文件夹中的js文件引入
style和body里面的内容与symbol的在线引入的内容是一致的
<!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" /><title>Document</title><script src="./iconfont.js"></script><style type="text/css">.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head><body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiaoqiche"></use></svg></body>
</html>
