vue系列开发1---使用阿里iconfont字体图标

最新推荐文章于 2025-11-04 22:01:38 发布

原创

最新推荐文章于 2025-11-04 22:01:38 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iconfont #字体图标

本文介绍如何从阿里图标库IconFont获取图标，并将其应用于项目中。包括下载图标字体、配置LESS文件以及在网页中调用图标的具体步骤。

1.在阿里图标http://iconfont.cn中找到自己需要的图标添加到购物车，或者添加自己的字体项目。下载

2.解压使用这4个文件

3.增加iconfont.less文件，同一目录下

//url为字体路径
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1491967237541'); /* IE9*/
  src: url('iconfont.eot?t=1491967237541#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1491967237541') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1491967237541') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1491967237541#iconfont') format('svg'); /* iOS 4.1- */
}
//使用字体的一些默认属性
[class*=" icon-"],
[class^=icon-]