VUE项目中引入icon

最新推荐文章于 2024-03-28 18:16:09 发布

poluocook

最新推荐文章于 2024-03-28 18:16:09 发布

阅读量1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/poluocook/article/details/126460351

版权

很多时候自带的图标不能满足我们的需求，需要UI设计。这时候我们就需要用到iconfont了。

ICONFONT有三种使用方式。

首先把文件放在项目内，方便引入。

第一种unicode

第一步：拷贝项目下面生成 @font-face

@font-face {
  font-family: 'iconfont';
  src: 
       url('iconfont.woff2?t=1660908505121') format('woff2'),
       url('iconfont.woff?t=1660908505121') format('woff'),
       url('iconfont.ttf?t=1660908505121') format('truetype');
}

第二步：定义iconfont的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面