首页 > 其他 > 详细

Vue在线引入阿里云图标库,外链方式引入

时间:2021-03-02 10:26:07      阅读:198      评论:0      收藏:0      [点我收藏+]

1.首先新建一个css文件:

技术分享图片

 

2.在阿里云此处复制代码:

技术分享图片

 

 并且加上:

/* 定义阿里云图标样式 */
.iconfont{
  font-family:"iconfont" !important;
  font-size:1rem;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
这样就可以全局使用了。

 全部代码:

@font-face {
  font-family: ‘iconfont‘;  /* project id 2391663 */
  src: url(‘//at.alicdn.com/t/font_2391663_gcrvq4t40th.eot‘);
  src: url(‘//at.alicdn.com/t/font_2391663_gcrvq4t40th.eot?#iefix‘) format(‘embedded-opentype‘),
  url(‘//at.alicdn.com/t/font_2391663_gcrvq4t40th.woff2‘) format(‘woff2‘),
  url(‘//at.alicdn.com/t/font_2391663_gcrvq4t40th.woff‘) format(‘woff‘),
  url(‘//at.alicdn.com/t/font_2391663_gcrvq4t40th.ttf‘) format(‘truetype‘),
  url(‘//at.alicdn.com/t/font_2391663_gcrvq4t40th.svg#iconfont‘) format(‘svg‘);
}
/* 定义阿里云图标样式 */
.iconfont{
  font-family:"iconfont" !important;
  font-size:1rem;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
/* 在要使用的地方<i class="iconfont">&#x33;</i> */

注:此处引入的格式是以Unicode格式引入的,你每一次更新新的图标,只要重新更新地址就好了,新的地址在阿里云官网,再复制过来就好

 

3.在main.js全局引入

import "./assets/css/font.css"

4.使用

/* 在要使用的地方<i class="iconfont">&#你要使用图标的Unicode代码;</i> */

 

Vue在线引入阿里云图标库,外链方式引入

原文:https://www.cnblogs.com/hmy-666/p/14467207.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!