码迷,mamicode.com
首页 > 其他好文 > 详细

vue项目中使用iconfont

时间:2020-03-18 15:32:45      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:class   vue   依赖   解压   alt   lan   pre   set   link   

一. 直接引用地址

  1. iconfont我的项目里生成地址:
    技术图片

  2. 在index.html head中引入上面地址
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_454988_dqx9pnwoxh7.css">
    <title>my</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
        alert('本网站不支持任何版本的IE浏览器, 建议使用Chrome浏览器访问')
      }
    </script>
  </body>
</html>

这种方法简单快捷,但是会依赖外部地址的css,可能会导致系统不稳定

二. 将iconfont文件下载到项目中

  1. 下载并解压文件
    技术图片

  2. 将解压的文件拷入项目中的styles文件中,并重命名为iconfont
    技术图片

  3. 项目中引入(我这里在styles的index.less中引入)
@import "./font/iconfont.css";

这种方式每次更改图标都要重新下载并替换项目中的文件,操作相对麻烦些,但是字体放到自己项目中,会比较稳定,不会因为他人网站导致不能用的问题

vue项目中使用iconfont

标签:class   vue   依赖   解压   alt   lan   pre   set   link   

原文地址:https://www.cnblogs.com/XHappyness/p/12517330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!