知识点：iconfont
官网网址 https://www.iconfont.cn/
初次使用需要注册登录，选中需要的图标，添加至购物车，添加完毕后，点击购物车，系统提示需新建项目，新建完成后，系统会自动生成相应的文件，如图所示：
5. 网页的linke rel="icon"详解 favicon深究
Favicon是favorites icon的缩写，亦被称为website icon（网页图标）、page icon（页面图标）或urlicon（URL图标）。Favicon是与某个网站或网页相关联的图标。网站设计者可以多种方式创建这种图标，而目前也有很多 建议包含以下两行HTML代码：
<link rel="shortcut icon" href="https://example.com/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="https://example.com/favicon.ico" type="image/vnd.microsoft.icon">
6.cdn方式引入iconfont
在页面头部引入<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5088172_5kpcurz7tr5.css">
<style> main li { height: 30px; line-height: 30px; position: relative; padding-left: 20px; /* 关键：为图标留出空间 */ list-style: none; /* 去掉默认列表符号 */ } main li::before { content: "\e675"; /* 替换为你的图标 Unicode */ position: absolute; left: 0; top: 0; font-size: 16px; color: #ff8400; font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
</style>
<body> <main> <ul> <li><a href="#">央视评论--致敬匠心：人生在勤，勤则不匮</a></li> <li><a href="#">中国制造放慢脚步:"工匠精神"走红"世界工厂"</a></li> <li><a href="#">央视评论--培养我们的“大国工匠” 是“挑战不可能”吗？</a></li> </ul> </main>
</body>
鲁公网安备 37110202000410号