vue页面和nvue页面 、引用阿里图标库-图标方法
- iconfont-阿里巴巴矢量图标库
- 选择所有要使用的图标 加入购物车
- 如下图 下载 下载后下面的3个图标可以任意使用
- 后期 如果增加了图标 需要重复以下步骤 并且把 .ttf 这个文件 替换掉项目里的 .ttf 文件
- 下载后，只复制下方两个图标 到项目文件的 static 中
- 在App.vue中引入公共样式
- 改路径为本地路径
- 使用字体图标
在nvue页面引用阿里矢量图
注意：字体图标必须写在text标签中
获取阿里矢量图地址方法 对应上方3 的位置
第一步 引入全局样式后
第二步 全局样式文件中设置图标的默认样式(此样式可以在text标签中style再次修改)
也可以写在app.vue页面内 此举就不需要每个页面都要写一次了
以上是方法1
下方是方法2 文字总结：
/*
引入阿里矢量图方法
1.阿里矢量图加入购物车后-下载-把里面名为 iconfont.css 和 iconfont.ttf 这两个文件复制到 项目根目录的 static目录下的 font 目录下
2.到App.vue下的第一行这样引入 @import "@/static/font/iconfont.css";
3.改变下方的路径为 src: url('/static/font/iconfont.ttf?t=1666971502133') format('truetype');
4.页面中这样使用： <text class="iconfont icon-shenhe-copy"></text> 或者 <text class="iconfont "></text>
5.每次更新文件中图标的时候 只需要把新下载的上方2个文件名的文件 覆盖到static下的font内的2个文件就可以
*/
vue页面和nvue页面 、引用阿里图标库-图标方法相关推荐
- 阿里图标库图标大小_网站图标：大小和设计注意事项
阿里图标库图标大小 Somebody might be able to do a great painting that is 20 × 30 in, but you take that down t ...
- 阿里图标库图标大小_适用于所有设备和大小的所有图标
阿里图标库图标大小 A site doesn't seem complete without having a favicon. For some reason, I will usually imm ...
- 在网页中引用阿里iconfont字体图标的三种方式
首先,你需要在阿里巴巴图标矢量库中创建账号. 创建完成后,选择你想要的图标添加到购物车(也就是添加入库). 添加了之后点击右上角的购物车按钮,弹出如下框,点击"添加至项目" 在此你 ...
- uniapp添加阿里字体图标库图标
字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式 复制阿里矢量图标库->我的项目->Unicode-> ...
- vue项目引入阿里巴巴矢量图标库图标及其使用教程
添加喜欢的图标 方式一:本地方式将图标引入到vue项目 在main.js文件中引入阿里巴巴矢量图标库的css文件 使用图标,注意加上iconfont前缀 效果 方式二:使用在线方式引入图标到vue项目 ...
- css3 - 字体图标库使用方法
一些字体图标库的网站 https://icomoon.io/app/#/select http://www.iconfont.cn/ http://www.bootcss.com/ http://ww ...
- 在vue框架下element-ui两种引用阿里云图标库的方法
方法一下载资源到本地 1.搜索想要的图标并添加入库 2.添加入项目 3. 下载解压放入src的文件中, 要在main.js文件中声明引入压缩包中的iconfont.css文件 注意文件路径 4.引入 ...
- html引用阿里云矢量图标（不照搬官方，手把手教学）
如何使用图标呢? 如果不想看前面介绍的话,直接最后一个标题即可 点我快捷跳转 1. 介绍 使用的时候,官方提供的使用方法总共三种. 第一种是:Unicode 第二种是:Font class 第三种是: ...
- 引用阿里云矢量图标库
1.登陆http://www.iconfont.cn/ 例如我需要购物车的图标 2.按下回车后会出现一堆的购物车图标 3.喜欢那个一个就鼠标移动到图标上去,加入购物车 4点击加入购物车后,就会出现在 ...
最新文章
- ICLR2020放榜 34篇满分论文！ 48篇orals，108篇spotlights，531篇poster
- 霍夫变换直线检测基本原理
- java 枚举高级应用_【后端】java基础（5.6）java高级基础之枚举
- 漫画 | 程 序 员 脱 单 指 南
- spring-security登录和权限管理
- python朴素贝叶斯分类MNIST数据集
- Django使用Python操作数据库 --Django 1.8.2 文档（中文）部分笔记
- 服务器c盘显示0字节可用,c盘0字节可用怎么解决 c盘0字节可用处理方法
- 多层json字符串转map_java json字符串转map集合递归嵌套
- 企业发文的红头文件_实例分享：怎样制作双发文单位红头文件，文件二字与发文单位并排...
- 《OpenGL ES 3.x游戏开发（下卷）》一2.3 风吹椰林场景的开发
- 不用PS，也可以轻松组合漂亮的图片—135编辑器拼图教程
- WineBottler for Mac（Mac 运行 exe 程序工具）破解版安装
- 如何推广企业微信号？企业进行公众号的推广有哪些方法？
- 区块链赚钱攻略：最新干货 区块链人士必读！
- 阿特拉斯拧紧枪说明书_ATLAS 阿特拉斯 DS手枪式电动拧紧枪
- 如何练胸肌（完整篇）
- Python3 调用谷歌翻译
- 我为什么会性格内向，能不能内向性格？
- python部署到iis_IIS 部署 Python 环境