vue项目中使用iconMoon图标
前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标
iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的。至于前两种有没有这个功能我暂时没了解,今天用了一下iconMoon瞬间喜欢上!!
首先提示一下:不要用我们的png,jpg等格式来转成svg格式。一个是基于像素的,一个是基于矢量线的,
哪怕我们用在高级的工具转,这些基础的东西是无法转换的,
而iconMoon生成自己的图标必须要使用真正的svg格式图标。
不多说其他的,正式开始,iconMoon官方地址
1.如果想要直接使用它们自带的官方图标
选择我们想要的图标之后,点击右下角的Generate Font F
这时会看到我们已经选择的图标,在这里可以修改名称等,然后点击右下角的下载
解压文件,可以查看demo.html,看我们的图标是否下载完成。在下载的文件夹中,我们只需要fonts文件夹和style.css文件
接下来在vue项目中创建文件夹,这里是我创建文件下路径,只是提供参考
scr/common/fonts
scr/common/stylus/style.css
继续走
打开style.css样式,修改引入字体的路径(不同路径写的方式不一样,需要注意)
在main.js中全局引入
import './common/stylus/style.css'
如果import时出错,可能是你的vue项目没有安装css-loader这些,具体的问度娘吧,这里就不解释了。
接下来就可以在各个组件中使用我们已经下载好的矢量图标了。这里我的class的名字是test1-02,需要换成自己icon的名字
<iclass="icon-test1-02"></i>
如果想要使用我们自己画的.svg格式的矢量图图标,点击Import Icons
导入我们本地的.svg格式的图标(注意,矢量图是用矢量线画的,png,jpg等使用像素来的,不可以直接用png转成svg格式,否则不成功)
引入之后,接来下就和上面的步骤一样了。
转载于:https://www.cnblogs.com/chinabin1993/p/8185398.html
vue项目中使用iconMoon图标相关推荐
- vue项目中设置网站图标
怎么在vue项目中设置网站图标: 1,先下载个icon图标,favicon.ico,大小为32*32的,放到static文件夹下: static文件是vue项目中用来存放静态资源的文件夹,放到这里的文 ...
- 在vue项目中设置网站图标
怎么在我们的Vue项目中设置自定义的网站图标: 首先我们需要先制作个ico图标,大小为32*32的,放到static文件夹下,附制作网站,我们把制作好的ico图片改名为:favicon.ico(注:必 ...
- 在vue项目中使用svg图标
目录 VUE项目中为什么使用svg 1.在src/components下创建文件夹,命名为SvgIcon,并再SvgIcon文件夹下,新增目录index.vue文件: 2.在src目录下,新增文件夹, ...
- vue项目中自定义icon图标
vue项目中有时需要用到自定义图标,用法如下 新建icon.css文件,定义图标及其名称 /*指针图标*/ .icon-pointer {background: url('../assets/imag ...
- vue项目中设置浏览器图标
如何设置项目运行时在浏览器网页窗口中图标的显示,请如下操作: 通过看vue项目的目录结构,根目录下有一个index.html,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在ind ...
- 如何在VUE项目中使用svg图标
一文带你搞定svg图标的使用! 文章目录 前言 一.SVG相较于字体图标的优点 二.使用步骤 1.新建一个vue2项目 2.安装项目依赖 3 .在src目录下新建文件夹 4.创建svg-icon组件 ...
- html js使用svg图标,Vue项目中使用svg图标
1,安装依赖 Vue项目的运行少不了安装依赖,使用svg同样. npm install svg-sprite-loader --save-dev 2,配置 项目中找到build文件夹中的webpack ...
- vue项目中插入icon图标
一.首先在iconfont上选好自己要的图标加入购物车添加到自己的项目,如图 二.点击下载到本地,下载完成并解压 三.把文件复制/移动到项目文件夹中 四.在iconfont.css文件中添加以下代码 ...
- vue项目中配置标题栏title的图标和文字
一.普通 HTML 页面,配置图标和文字 <head><title>标题栏文字</title><link rel="icon" href= ...
最新文章
- 深度丨解密Python为什么能够风靡全宇宙
- python详细安装教程linux-Linux系统如何安装Python?新手教程
- Winform中选取指定文件夹并获取其下所有文件
- Vue 无限滚动加载指令
- MATLAB+simulink仿真学习
- 字体引起的用户密码错误
- 尔雅计算机基础答案山大,大学计算机基础2018尔雅满分答案
- H5 微信分享显示标题和图标
- ftpclient覆盖上传文件
- 如何提高FPGA工作频率?影响FPGA运行速度的几大因素
- 服务器自带的ftp报错505,使用Delphi带的FTP控件删除服务器上的文件,该文件正在被使用(ASF格式影片,正在被点播)(100分)...
- win10无法装载iso文件_win10系统iso文件怎么安装
- 区块链的底层技术:P2P网络原理与应用详解
- Visio绘制维恩图举例
- 《Loy解说Eureka服务端源码(二)》
- Hexo+Github实现相册功能
- Educational Codeforces Round 61 (Rated for Div. 2)(A、B、C、D、E、F)
- 通信原理|Chapter1.绪论
- 计算机以太网,局域网,互联网,令牌网,ATM网络
- Latex 字母上面加符号 波浪线 横线 角号等
热门文章
- html 绘制正方形,HTML5之Canvas画正方形
- 学python兼职赚钱是真的吗,学python做兼职赚钱吗
- 4 路由策略与策略路由
- 苹果香港对付黄牛出新招:购买iPhone需摇号
- 健康大数据分析技术有哪些?
- DataGrip的简单使用笔记
- 灵雀云获Gartner® 首份《DevOps平台魔力象限报告》“荣誉提及”
- C#线程池ThreadPool.QueueUserWorkItem接收线程执行的方法返回值
- 使用getJSON的同步异步问题
- ​李宏毅机器学习——强化学习Reinforcement Learning