vue的vantUI引入外部图标
前言
在查找怎么引入外部图标的时候,发现对于一些细节他们的文章描述的并不清楚。因此打算自己对自己是如何用vantUI引入外部图标的方法进行一个整理;同时,虽然是引入vantUI的外部图标,但是方法都是通用的,其他框架也能够使用该方法进行引入外部图标
vantui原生内部引用
在正式引入之前,我觉得还是有必要说一下它原本的用法
它内置有一定数量的图标,但是当我们有需要用到其他没有的图标的时候,就需要引入了
基础用法
通过 name 属性来指定需要使用的图标,Vant 内置了一套图标库,可以直接传入对应的名称来使用。
<van-icon name="chat-o" />
使用图片 URL
你也可以直接在 name 属性中传入一个图片 URL 来作为图标。
以上就是它原生的使用方法,都是操作name属性进行获取图标
引入iconfont
本次使用的是阿里巴巴的iconfont,它的链接网址为:
阿里巴巴iconfont图标库
ps:需要登录才能下载图标
引入外部图标步骤
选择图标
进入阿里巴巴图标库之后,界面为这样
然后选择你需要的图标,如我图片,在需要的图标上面停留添加入库
添加图库之后,在你登录的状态下,右上角是会有一个购物车图标
点击它,然后就会弹出你选择好的图标
接着点击下载代码,我们就有了我们的图标压缩包
引入项目
首先我们需要进行一个解压
解压出来,文件名是一堆不容易理解和看懂的文件名称,为了方便引入和查找,我们先对它重新命名,命名按照自己的喜好即可
如我取名叫lockIcon
然后,将该解压后的文件夹,放到我们项目的src/assets文件夹底下
最终结构是这样
然后我们需要在main.js引入这个iconfont.css
即解压后文件夹的其中一个文件
在main.js如我图片显示路径应该是
src/assets/lockIcon/iconfont.css
于是,最终写入到mai.js的代码为:
// 引入iconfont图标
import "../src/assets/lockIcon/iconfont.css"
使用外部引入图标
在最终使用的时候,如果是第一次使用的人,一定会感到费解,到底该如何使用?名称应该是怎么样的?
我们进入到iconfont.css
文件看代码
@font-face {font-family: "iconfont"; /* Project id */src: url('iconfont.ttf?t=1662339871569') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-suoding:before {content: "\f00c9";
}.icon-jiesuo:before {content: "\f0195";
}
在这里我们注意font-family
这个属性,默认它的值是iconfont
也就是,父级对象是它。那么图标呢?
.icon-suoding:before {content: "\f00c9";
}.icon-jiesuo:before {content: "\f0195";
}
注意到这个,我实际上项目中只引入了两个图标,锁和解锁的图标
那么,这里我们就清楚了,对应这两个图标的时候,我们应该使用如代码中的名称:
锁定:.icon-suoding
解锁:.icon-jiesuo
这个是其他人并没有讲到的地方
于是在页面中,我们使用代码引入图标
<!--锁定-->
<van-icon class="iconfont icon-suoding" class-prefix="icon" name="icon-suoding"></van-icon>
<!--解锁-->
<van-icon class="iconfont icon-jiesuo" class-prefix="icon" name="icon-jiesuo"></van-icon>
需要一提的是,我在尝试的时候,只写一下代码也是可以的
<!--锁定-->
<van-icon class="iconfont icon-suoding"></van-icon>
<!--解锁-->
<van-icon class="iconfont icon-jiesuo"></van-icon>
因此,作为外部引入很大一部分是通过css进行引入
项目实际效果
那么,在这里也给大家看一下我项目中实际的结果吧
结语
以上就是关于vue如何引入外部图标的方法,也同样是适合其他vue框架的
vue的vantUI引入外部图标相关推荐
- php引入外部js,vue.js怎么引入外部js,vue引入第三方js库
vue.js怎么引入外部js·怎么介绍外部js,在vue.js中引入外部js的方法如下:1.使用外部文件[config.js],代码为[函数格式XML(text){ return text }]:2. ...
- uni-app引用外部css,在vue/uni-app中引入外部的css文件
一.在vue中引入外部的css文件 在项目的src文件下,新建一个style文件夹,存放css文件 1. 全局引入 将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 `` ...
- vue+element-ui项目引入第三方图标库:阿里巴巴矢量图标库(问题:小方框)
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
- VUE 项目中引入外部js文件(CND引入)
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件 引入 :<script src="https://cdnjs.cloudflare.com ...
- vue文件如何引入icon图标并使用
1.进入阿里矢量图标库https://www.iconfont.cn.并登录 2.选择自己需要的图标并加入购物车 3.选完后点击右上角的购物车图标 4.点击"添加至项目"(选择已创 ...
- vue 组件内引入外部在线js、css
一.css: <style scoped>@import 'https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css'; & ...
- vue中 element-ui引入阿里巴巴图标库两种办法
一:最初步骤,去阿里巴巴图标库. 过程:https://blog.csdn.net/mmd0308/article/details/78390783 二:配置: 1.在iconfont.css文件中将 ...
- 微信小程序--icon引入外部图标
本博客仅仅只是个意外.大佬请绕道. 第一步:搭建框架 首先你得有个微信小程序的开发工具,然后把小白架构搭建好.(不会去看官网). 简单的初步框架搭建完之后目录和界面是这个样子: 如果想加一个底部tab ...
- vue如何引入icon图标并使用
1.进入阿里矢量图标库https://www.iconfont.cn.并登录 2.选择自己需要的图标并加入购物车 3.选完后点击右上角的购物车图标 4.点击"添加至项目"(选择已创 ...
最新文章
- 人工智能模型数据泄露的攻击与防御研究综述
- 语言运行速度的一次测试
- ncnn windows
- Material DesignDrawerLayout的旋转箭头的实现方式。
- 新5 年时间服务器从 0 到 200,一个创业公司的架构野蛮生长史头疼哈
- win8 Windows 8 设置 默认浏览器
- hbuilder怎么设置网页的大小_大明:网页字体大小怎么调?教你方法一键搞定
- 深入理解JDBC的超时设置 转
- LeetCode 417. 太平洋大西洋水流问题(BFS/DFS)
- javascript 西瓜一期 09 字符与编码的对应关系 理解
- 程序员接私活平台_程序员去哪儿接私活?我系统总结了15个国内平台,绝对靠谱...
- 悄悄告诉你,在硅谷,有一种工作比程序员挣得多
- Codeforces Round #365 Div.2
- EF BB BF的问题
- java如何实现web页面聊天_Java和websocket实现网页聊天室
- android免费离线讯飞语音合成
- mysql 存储视频_数据库中怎样存储视频?谢谢各位
- 游戏类型英文简称/全称对照表
- java数组列表和数组的区别_数组,集合,列表的使用与区别
- python绘制派大星_简笔画:如何使用Flash绘制派大星 看完你就知道了