标签：vue assets 样式 iconfont 导入 图标 css icon

点击【 Font class 】- 【 下载至本地 】，解压之后导入到项目【/src/assets/icon】，这个是【iconfont.css】文件。

然后在main.js中导入

import '@/assets/icon/iconfont.css'

然后引用就行

<span class="iconfont con-gouwuche-"></span>

第二种方式 Symbol

点击【 Symbol 】- 【 下载至本地 】，解压之后导入到项目【/src/assets/iconfont】 目录下。

 在main.js中引用

// symbol 引用
import '@/assets/iconfont/iconfont.js'
import '@/assets/iconfont/iconfont.css'
//设置全局icon样式 
import '@/assets/iconGloble.css'

全局定义下对icon对图标进行基础设置，比如图标的宽高等。创建【/src/assets/iconGloble.css】文件   建议在各个页面根据需要去自定义

.icon{
  width:5em;
  height:5em;
  vertical-align:-0.15em;
  fill:currentColor;
  overflow:hidden;
}

在用图标的组件中使用。
注意：

• class="icon"这个【icon】类名是设置图标的基础样式css样式类名。
• xlink:href="#icon-xin" 就是css中的样式类名，但是#必需要加

•  <svg
        class="icon"
        aria-hidden="true"
      >
        <use xlink:href="#icon-xin"></use>
      </svg>

   

后期追加图标

两种方式，其实都差不多。首先在【assets/iconfont/iconfont.css】中将你要追加的图标css样式加入，或者整个css文件的内容直接替换。点击【点此复制代码】后会在网页上打开一个新窗口，里面都是css样式

• 如果有很多新图标，但只需要添加一个的话，就只复制一个你需要的图标样式，然后追加到原css样式中。
  • js也是同样处理，copy内容从…结束，然后追加到原来的js文件中。
• 如果多个新图标都需要的话，直接整个内容copy-paste就好。

标签：vue,assets,样式,iconfont,导入,图标,css,icon
来源： https://www.cnblogs.com/wx18638101223/p/16269537.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。