IconFont使用

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

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

使用方法(这里以阿里巴巴矢量图标库为例。https://www.iconfont.cn/):
1、选择图标加入购物车,点击购物车,选择下载代码,得到压缩包如下:
IconFont使用_第1张图片
2、将图中框起来的四个文件,另存到本项目的文件夹中。这里存储在项目的font文件夹下。
3、打开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('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;
}

4、打开demo_index.html,挑选相应图标并获取字体编码,应用于页面。也可增加class,应用其他样式。

<span class="iconfont">&#x33;</span>

你可能感兴趣的:(前端,html,css,iconfont)