iconfont拓展iview图标库

文章目录

  • 前言
    • 1.如何下载图标?首先进入官网,找属于自己需求的图标,添加到购物车
    • 2.点击右上角的购物车,会来到此页面,点击下载代码
    • 3.下载完成后,是一个压缩包,文件内容如下
    • 4.在项目assets下新建一个目录用来存放iconfont.js,iconfont.css,iconfont.ttf三个文件
    • 5.接下来,在main.js,文件引入
    • 6.这样可以直接使用了,具体如下
    • 7.成功展示,完美


前言

阿里图标 Iconfont图标-功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。是阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。


1.如何下载图标?首先进入官网,找属于自己需求的图标,添加到购物车

在这里插入图片描述


2.点击右上角的购物车,会来到此页面,点击下载代码

在这里插入图片描述


3.下载完成后,是一个压缩包,文件内容如下

我只需要iconfont.js,iconfont.css,iconfont.ttf三个文件,其他用不到

在这里插入图片描述


4.在项目assets下新建一个目录用来存放iconfont.js,iconfont.css,iconfont.ttf三个文件

我的目录是font

在这里插入图片描述


5.接下来,在main.js,文件引入

代码示例

import '@/assets/font/iconfont.css'
import '@/assets/font/iconfont.js'

在这里插入图片描述


6.这样可以直接使用了,具体如下

注意:iconfont必须有,否则无法识别,后面才是具体的图标名

   <Icon custom="iconfont icon-wodejiashizheng" size="30"/>

红色框是具体的图标名,不需要前面的点(类选择器)
在这里插入图片描述

在这里插入图片描述


7.成功展示,完美

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/262774.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软件项目安全保证措施

一、 身份鉴别 二、 访问控制 三、 通信完整性、保密性 四、 抗抵赖 五、 数据完整性 六、 数据保密性 七、 应用安全支撑系统设计 软件开发全流程文档支撑下载&#xff1a;软件项目开发全套文档下载-CSDN博客

基于比较的排序算法总结(java实现版)

目录 什么是基于比较的排序算法 什么是排序算法的稳定性 基础排序算法的稳定性 插入排序法 希尔排序法 冒泡排序法 总结 高级算法的稳定性 快速排序法 堆排序法 归并排序法 总结 注意 什么是基于比较的排序算法 基于比较的排序算法定义&#xff1a;之所以能给元素…

ModuleNotFoundError: No module named ‘tensorflow‘

直接运行pip install tensorflow安装成功之后&#xff0c;发现版本是tensorflow2.15.0 python的版本是3.9版本 导入包&#xff1a;import tensorflow 打包xxx.exe,调用之后提示错误 ModuleNotFoundError: No module named tensorflow 最后发现特定的python的版本对应特定的t…

Go语言基础:深入理解结构体

Go语言基础&#xff1a;深入理解结构体 引言&#xff1a;Go语言与结构体的重要性结构体的定义与声明结构体与方法结构体的嵌入与匿名字段结构体的继承与多态性结构体与性能优化结论&#xff1a;结构体在Go中的应用场景 引言&#xff1a;Go语言与结构体的重要性 在当今迅速发展…

java并发编程七 无锁解决加锁问题

文章目录 问题提出解决思路-锁解决思路-无锁 CAS 与 volatile慢动作分析volatile为什么无锁效率高CAS 的特点 问题提出 有如下需求&#xff0c;保证 account.withdraw 取款方法的线程安全 package cn.onenewcode; import java.util.ArrayList; import java.util.List; interf…

JSON Web Token JWT几种简单的绕过方法

JWT结构 JSON Web Token&#xff08;JWT&#xff09;是一个非常轻巧的规范。 这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。 JWT常被用于前后端分离&#xff0c;可以和Restful API配合使用&#xff0c;常用于构建身份认证机制 如图为JWT加密后的示例&…

恶意软件样本行为分析——Process Monitor和Wireshark

1.1 实验名称 恶意软件样本行为分析 1.2 实验目的 1) 熟悉 Process Monitor 的使用 2) 熟悉抓包工具 Wireshark 的使用 3) VMware 的熟悉和使用 4) 灰鸽子木马的行为分析 1.3 实验步骤及内容 第一阶段&#xff1a;熟悉 Process Monitor 的使用 利用 Process …

【高效开发工具系列】eclipse部署web项目

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

类实现接口无法识别接口文件

类实现接口无法识别接口文件 problem 问题 接口文件后缀很奇怪 像个文本文件类文件无法自动识别接口 reason 类文件创建时不正确&#xff0c;需要选择 interface &#xff0c;否则是被当成文本文件 solution 创建时选择 interface

一文详解如何将 ExternalOES转换为 TEXTURE_2D纹理

在使用OpenGL ES进行图形图像开发时&#xff0c;我们常使用GL_TEXTURE_2D纹理类型&#xff0c;它提供了对标准2D图像的处理能力。这种纹理类型适用于大多数场景&#xff0c;可以用于展示静态贴图、渲染2D图形和进行图像处理等操作。 另外&#xff0c;有时我们需要从Camera或外部…

使用docker创建自己的Android编译容器

文章目录 背景步骤1.创建Dockerfile2.编写Dockerfile指令3.编译4.使用 背景 每次拿到新机器或者系统重装&#xff0c;最麻烦的就是各种环境配置&#xff0c;最近学习了一下docker的知识&#xff0c;用dockerfile创建一个Android编译容器&#xff0c;这样就不用每次都吭哧吭哧的…

OpenCV如何以指定分辨率打开摄像头(C++ / Python代码演示)

问题背景 使用OpenCV打开USB摄像头时经常会遇到一个问题:我的摄像头最高分辨率是1920 * 1080,为什么用OpenCV打开摄像头保存的图片每次都是640 *480?能不能以最高分辨率打开并保存图片呢? 如何解决 首先需要确认自己的摄像头支持的最大分辨率是多少,具体步骤可以参考下…

处理HTTP错误和异常在Go语言中的最佳实践

在Go语言中&#xff0c;处理HTTP错误和异常是非常重要的。下面是一些最佳实践&#xff0c;帮助您有效地处理HTTP错误和异常。 定义错误类型 首先&#xff0c;定义一个自定义的错误类型&#xff0c;以便在处理HTTP错误时提供更清晰的错误信息。您可以使用标准库中的error类型作…

【Xcode】解决Unable to process request - PLA Update available

出现场景 IOS更新app时&#xff0c;使用Xcode上传新版本的包时&#xff0c;提示无法上传。 Unable to process request -PLA update available you currently dont have access to this membership resource. To resolve this issue ,agree to the latest program license a…

PHP-Xlswriter高性能导出Excel

使用背景 使用传统的PHPExcel导出效率太慢&#xff0c;并且资源占用高&#xff0c;数据量大的情况&#xff0c;会导致服务占用大量的资源&#xff0c;从而导致生产意味&#xff0c;再三思索后&#xff0c;决定使用其他高效率的导出方式 PHP-Xlswriter PHPExcel 因为内存消耗过…

福建农林大学 html +css + JavaScript 期末复习 -- 保姆级

html css JavaScript 期末复习&#xff08;保姆级复盘&#xff09; 考试题型 1、选择题 20题 30分 2、判断题 15题 15分 3、程序题 3 题 30分 4、综合题 2 题 25分 1、网页第一代文本标签&#xff08;直接上代码&#xff0c;看保姆级注解&#xff09; <!-- doctype: docum…

文件上传——后端

文件上传流程&#xff1a; 创建阿里云OSS&#xff08;对象存储服务&#xff09;的bucket 登录阿里云&#xff0c;并完成实名认证&#xff0c;地址&#xff1a;https://www.aliyun.com/. 可以通过搜索&#xff0c;进入以下页面&#xff1a; 点击立即使用后&#xff1a; 点击…

hex和rgb色值转换-色彩加深减淡

我们在做主题订制的时候&#xff0c;一般都会选一种主题色&#xff0c;该颜色以主题色为主导&#xff0c;颜色依次变浅&#xff0c;用于做主题色下的关联色统一&#xff0c;例如文字激活、激活的背景色、菜单背景色等 在项目中主题色的应用&#xff1a; 如果你在项目中允许用…

create-react-app 打包去掉 map文件

前言&#xff1a; 在使用 create-react-app 创建的React应用中&#xff0c;默认情况下会生成带有.map文件的打包文件&#xff0c;这些.map文件包含了源代码和调试信息&#xff0c;用于开发和调试过程中进行错误跟踪。然而&#xff0c;在生产环境中&#xff0c;这些.map文件通常…

ISA95 及工业互联网平台

ISA95简称S95&#xff0c;是美国仪表、系统和自动化协会&#xff08;ISA&#xff09;在95年提出来的&#xff0c;也是这个协会启动编制的第95个标准项目。它定义了企业商业和控制系统之间的集成&#xff0c;主要可以分成三个层次&#xff1a; 第0&#xff0c;1&#xff0c;2层…
最新文章