字体图标：引用iconfont、bootstrap的方法汇总

iconfont  字体图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/

1、方法一：font-class 引用 【常用】

• 引入字体图标样式表<link rel="stylesheet" href="./iconfont/iconfont.css">
• 调用图标对应的类名，必须调用2个类名
• iconfont类 、 icon-xxx 图标对应的类名

2、方法二：Unicode引用  复制下面代码 （注意：若未起效，修改 url 路径）

• 引入iconfont.css文件：<link rel="stylesheet" href="./iconfont/iconfont.css">

• 项目下面生成的 @font-face

  •    @font-face {

                font-family: 'iconfont';

                src: url('iconfont.woff2?t=1623202871024') format('woff2'),

                    url('iconfont.woff?t=1623202871024') format('woff'),

                    url('iconfont.ttf?t=1623202871024') format('truetype');

            }

•  定义使用 iconfont 的样式

  •     .iconfont {

                font-family: "iconfont" !important;

                font-size: 16px;

                font-style: normal;

                -webkit-font-smoothing: antialiased;

                -moz-osx-font-smoothing: grayscale;

            }

• 引用对应字体图标的编码： <i class="iconfont">&#xe704;</i>购物车

  

 3、方法三

font-family: 'iconfont';  必填

 

bootstrap: 引入字体图标

Bootstrap中文网