IconFont使用
程序员文章站
2024-02-16 17:10:46
...
IconFont优点:
相比加载许多图片,IconFont将多个图标合并到一个字体文件中,可以减少http请求,提高网页性能;
因为是字体,可*的变换大小(字体大小即为图标大小)和颜色;
矢量图不失真;
适用于多个平台(浏览器、iOS App、Android App)。
IconFont缺点:
单色;
创建自己的字体图标很费时间,维护成本高;
使用版权的限制,有的字体收费。
使用方法(这里以阿里巴巴矢量图标库为例。https://www.iconfont.cn/):
一、选择图标加入购物车,点击购物车,选择下载代码,得到压缩包如下:
二、将图中框起来的四个文件,另存到本项目的文件夹中。这里存储在项目的font文件夹下。
三、打开iconfont.css文件,复制如下两段代码,并将url路径修改为步骤二的路径,这里是./font/
@font-face {font-family: "iconfont";
src: url('./font/iconfont.eot?t=1589359495934'); /* IE9 */
src: url('./font/iconfont.eot?t=1589359495934#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./font/data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABmQAAAJ6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApsgQ0BNgIkAwgLBgAEIAWEbQczG7YFEdWLabI/Qjhkg/4kRCJltUcf16Humx1DxDfsRt8DhpIrFOZf0CIhJXgDAAAAAIggWsuqZyaIClAlJ4OKH1kjC0+kHPsI9a8IJJFQCzW5tgueIIJEMn/LLdSOtjnxki4UNJKWoM8S+O4Nv79ZSUueiXBQ5ZIqTaHiQxnY9Q2wcJgvzbbqS0DUA+7GhBD9ZqC/7pKd5fXvYwDkkEmCAofTLlAgd0C53HP5XIoDSwM651gUWYGE3jB2wQu8T6DZkJpYi7fvJ4W9LBDn9MnDVAgoCks3CvUNe4t4YKsx3Uy/cD/6fvwMQyR1mV21+8SGY/qLnCxcOQ0IggsBHa5DRg2F2N+Y2AnBaFlzIo1xrPLgi68CkziqXrC/zi5tBQNQ8ExCT/SopQmUZHgIC5POJLV29x961QMvs//1Lh9cF6HsYI5XHnvb4nj8J4cb9GE2/qbuyUL7bPWlCRkpeiLwF84C1bn8037jSf+lw7KA97+8Hi2oLmRo3LUz+EXCgR3FENvGVDRhoysZmrQ0oVkzKrCn2+epmr77yYRGfXflajCYIWs0QSzUGuq0mEa9RotoNmXT4RY9rkCUJky6ChA6PUTSbh1Zp+fEQv2EOv1+o15ngGYHozNbUIc+IawYn1D/QDfjIFwzn+LyC8pXV1FeHNEfSFaHIXD9cjrBAWmJDfYtQ2YBgsYeYvAYdt0IE40GG3YV8xR5nmh6k9uM/eIEYcX4BPUP6GYcRDCYT5XPX1C+uoo6auqcDySrRwcBlz+AmCiGQTWP8op9yxCzAILGHsRgFnbdCKbmWQYbdqkJsSniOb3EUIW7var/gXzWgK0Vjj3ryfMdRsuLBQAAAA==') format('woff2'),
url('./font/iconfont.woff?t=1589359495934') format('woff'),
url('./font/iconfont.ttf?t=1589359495934') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('./font/iconfont.svg?t=1589359495934#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
四、打开demo_index.html,挑选相应图标并获取字体编码,应用于页面。也可增加class,应用其他样式。
<span class="iconfont">3</span>