如何在vue-2.0中使用iconfont中的图标

最新推荐文章于 2024-02-29 17:57:04 发布

qq_34867424

最新推荐文章于 2024-02-29 17:57:04 发布

阅读量608

点赞数

分类专栏：前端开发文章标签： vue2.0 使用iconfont

本文链接：https://blog.csdn.net/qq_34867424/article/details/102719828

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在vue-2.0中使用iconfont中的图标

事情是这样的，公司新进了几个终端，就加湿器、灯带什么的。对应终端的大屏展示页面也需要改，就需要把一些灯光啊、灯带的图片改一改，觉得之前的不是很合适，然后我打开自己的代码看了下，字体图标库用的是iconfont，最近用了太多的fontawesome,导致我对iconfont一点印象都没了，就像失忆了一样，之前是怎么实现的完全忘记，我也是服了我这个猪油脑子，于是乎重新拾起来。

步骤

1.登录iconfont官网
2.进入图标管理-我的项目
3.然后点击对应的项目会有对应的项目中的图标显示出来
4.生成在线链接，或者下载到本地都可以
5.最后在项目中使用就可以了
在这里插入图片描述

代码

我的话主要生成的是在线的，所以在index.html 文件中将生成的网址引入即可

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>环境监测控制系统</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js"></script>
    <script type="text/javascript" src="./static/vxgplayer-1.8.51/vxgplayer-1.8.51.min.js"></script>
    <script src="./static/vxgplayer-1.8.51/vxgplayer-1.8.51.js"> </script>
	  <link href="./static/vxgplayer-1.8.51/vxgplayer-1.8.51.min.css" rel="stylesheet"/>
	 <!--下面这一行就是引入的外部链接> 
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1131965_dby6le58uu4.css">
    
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

然后在需要的地方引入即可class=‘iconfont 图片名称’

<div class="right-box-right" >
 <i class="iconfont icon-xiaofangshuibeng "  title="设备关闭"></i> 
</div>

qq_34867424

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在vue-2.0中使用iconfont中的图标

在vue-2.0中使用iconfont中的图标事情是这样的，公司新进了几个终端，就加湿器、灯带什么的。对应终端的大屏展示前端页面也需要改，就想要把一些灯光啊、灯带的图片改一改，觉得之前的不是很合适，然后我打开自己的代码看了下，字体图标库用的是iconfont,那就想着改么，但是就像失忆了一样，之前是怎么实现的完全忘记，我也是服了我这个猪油脑子，于是乎重新拾起来。...
复制链接

扫一扫