欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

IconFont使用

程序员文章站 2024-02-16 17:10:46
...

IconFont优点:
相比加载许多图片,IconFont将多个图标合并到一个字体文件中,可以减少http请求,提高网页性能;
因为是字体,可*的变换大小(字体大小即为图标大小)和颜色;
矢量图不失真;
适用于多个平台(浏览器、iOS App、Android App)。

IconFont缺点:
单色;
创建自己的字体图标很费时间,维护成本高;
使用版权的限制,有的字体收费。

使用方法(这里以阿里巴巴矢量图标库为例。https://www.iconfont.cn/):
一、选择图标加入购物车,点击购物车,选择下载代码,得到压缩包如下:
IconFont使用
二、将图中框起来的四个文件,另存到本项目的文件夹中。这里存储在项目的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">&#x33;</span>