程序员经验分享-hwhale

vue项目中使用iconfont阿里图标库

2023-11-19

1.进入icon 官网  iconfont-阿里巴巴矢量图标库

2.根据搜索选择自己想要的图片 添加到项目中或者新建项目 如下图

 

3.添加之后如下图 点击下载至本地

 4.下载本地解压后的文件如下图

5.在vue项目中  css新建一个文件夹 把 图4解压后的复制到css目录下  如下图

6.在vue入口mian.js中引入 图4的 iconfont.css 如下图

 

 

7.iconfont.css 里面的内容如下图

 

 

8.在vue各个组件中使用方法 

 <i class="iconfont icon-daosanjiao1"></i> //倒三角
 <i class="iconfont icon-dianhua"></i>    //电话
 <i class="iconfont icon-suo"></i>        //密码

9效果图

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

javascript

前端

vue项目中使用iconfont阿里图标库 的相关文章

  • angularjs：如何向资源对象添加缓存？

    在 http 中添加缓存非常简单 通过传递cache true http docs angularjs org api ng http https docs angularjs org api ng service 24http有缓存选项

  • 如何通过单击图像预览上的“x”从文件输入中删除图像？

    我目前有一个文件输入 一旦用户上传图像 就会显示图像预览 在图像预览上 有一个 x 可以从列表中删除图像预览 单击此 x 后 有什么方法可以从输入中的文件集中删除图像吗

  • 取消html5浏览器中的单图请求

    我正在动态加载 大 图像以绘制到 html5 画布中 如下所示 var t new Image t onload t src http myurl 但每隔一段时间就会想取消图片请求完全地 我想出的唯一方法是设置src to i e t sr

  • 访问sendBeacon发送的数据

    文档表明sendBeacon通过发送其数据HTTP POST request 但在 PHP 中 POST变量似乎是一个空数组 这是我的 JavaScript 代码 navigator sendBeacon beacon log php My

  • 动态速度计 javascript 或 jquery 插件

    我希望有动态ajax插件在页面上显示速度计 一个想法是我设置一个背景并旋转针 有人知道相关插件吗 这里有一些供您参考 http bernii github com gauge js http bernii github com gauge

  • VBA / HTML / jQuery 选择自动完成 - 在列表中选择

    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph

  • Node js 使用中间件重定向进行过多重定向

    在我的 Node js 应用程序 我使用的是express 4 x 中 我想检查用户是否已登录 如果用户未登录 我想重定向到我的登录页面 然后我在中间件中这样做 服务器 js app use function req res next if

  • 消息“在 jest.setTimeout 指定的 5000 毫秒超时内未调用异步回调”

    我正在使用 Puppeteer 和 Jest 来运行一些前端测试 我的测试如下 describe Profile Tab Exists and Clickable settings user gt test Assert that you

  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun

  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中

  • Leaflet js虚构地图

    我是 Leaflet 的新手 我想了解如何创建完全交互式的虚构地图 我有一张图像想要转换为传单地图 该图像基本上像图表一样具有许多连接和点 我想首先将该图像转换为地图 能够将鼠标悬停在这些点上 突出显示它们并显示有关它们的信息 并且还可以在

  • 如果链接包含特定文本，jQuery 将类添加到 href

    我的网站上的列表中有一些动态填充的链接 这些链接链接到文件 是否可以使用 jQuery 查看文件名是否以 pdf 结尾 并在 href 或类似的链接文本以 mp3 结尾时添加一个类 例如 我的列表中有以下链接 文件1 pdf 歌曲1 mp3

  • 在d3.js中将2D形状转换为3D，并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程

  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr

  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t

  • 如何在jquery中获取保存时间和当前时间的差异？

    我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201

  • Nodejs mysql 获取正确的时间戳格式

    我在用着mysqljs https github com mysqljs mysql得到结果后sql我变得不同TimeStamp格式如下 created at Sat Jul 16 2016 23 52 54 GMT 0430 IRDT 但

  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz

  • KeyboardAvoidingView - 隐藏键盘时重置高度

    我正在使用 React NativeKeyboardAvoidingView设置我的高度View当显示键盘时 但是当我关闭应用程序中的键盘时 视图的高度不会变回原来的值

  • 在 GWT 中，在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

  • Nginx知识总结

    1 简介 Nginx engine x 是一个高性能的HTTP和反向代理web服务器 同时也提供了 IMAP POP3 SMTP服务 Nginx是由伊戈尔 赛索耶夫为俄罗斯访问量第二的 Rambler ru站点开发的 第一个公开版本0 1

  • matlab制作旋转动态图,matlab 如何画动态图（绘图与旋转视图）

    效果图 在matlab中 作图是重要的一部分 那么对于三维的图像 如何将静态的改为动态的呢 首先 静态图的代码 t 0 0 1 20 i 1 200 这里只是画了一个点 而 绘图 效果图 在matlab中 作图是重要的一部分 那么对于三维的

  • docker compose 部署skywalking

    文章目录 前言 架构图 docker compose 脚本 整合springboot 前言 SkyWalking 是一个开源的 APM 系统 核心功能如下 服务 服务实例 端点指标分析 根本原因分析 服务拓扑图分析 服务 服务实例和端点依赖

  • 【SQL注入-12】http头部注入案例—基于Sqli-labs靶机（借助BurpSuite工具）

    目录 1 概述 1 1 User Agent概述 1 2 Referer 概述 2 实验平台及实验目标 2 1 实验平台 2 2 实验目标 3 User Agent注入案例 以sqli labs Less18为例 3 1 注入前准备 3 2

  • 【翻译】 DMA和get_user_pages()

    LWN net需要你 没有订阅者 LWN将根本不存在 请考虑注册订阅 帮助LWN继续出版 作者 Jake Edge 2018年12月12日 Linux管道工会议 在2018年Linux Plumbers大会 LPC 的RDMA微型会议上 J

  • 数据理解与数据准备

    1 数据类型 属性类型 属性的取值范围决定了属性的类型 定性数据 标称属性 多分类变量 二元属性 01变量 序数属性 有序分类变量 定量数据 区间标度属性 比率标度属性 区分这两种属性的原则是该属性是否有固定的零点 根据表现出来的数值特点

  • Spring关于数组、集合和Properties的注入

    在某个类中需要依赖其它类时 通常是new一个依赖类再调用类实例的方法 这种开发存在的问题是new的类实例不好统一管理 Spring提出了依赖注入的思想 即依赖类不由程序员实例化 而是通过Spring容器帮我们new指定实例并且将实例注入到需

  • prometheus实战指南

    一 prometheus概述 1 Prometheus简介 Prometheus是一套开源的系统监控报警框架 作为新一代的云原生监控系统 目前已经有上千个贡献者参与到Prometheus的研发工作上 并且超过120 项的第三方集成 Prom

  • 知识图谱快速入门

    图技术 利用neo4j networkx dgl python做图分析挖掘 1 最短路径算法dijkstra 2 基于networkx的隐性集团关系识别模型 3 基于Neo4j的担保社群型态分析挖掘 4 基于python求有向无环图中tar

  • Matrix 【POJ - 2155】【二维线段树+永久化标记】

    题目链接 挺好的一道题 一开始用lazy标记往下推 总是推不出样例的正解 然后就去看了相关博客 发现却确实如此 在这里是无法用lazy标记来层层推的 并且还会出现超内存的情况 所以 便改用了永久化标记来解这道题 还有一件是 关于discus

  • IMU姿态计算

    总述 IMU即惯性测量单元 主要用于对机体的加速度与角速度的测算 使用场景很多 例如 平衡车 惯性导航等等 姿态 姿态角 Euler angles 是用于描述物体在三维空间中的旋转姿态的一种表示方法 它由三个角度组成 通常表示物体绕三个轴

  • html3D创意相册附源码

    3D创意相册 效果图如下 文件目录 图片名称 jpg index html

  • VB+SQLite组合，真香！（一）

    微信公众号 网管小贾 个人博客 www sysadm cc 嗨 你好 我是网管小贾 当你看到这个标题时 是不是感觉很奇怪呢 老掉牙的VB和 玩具 数据库SQLite搞在一起是个什么玩意 待我慢慢道来哈 SQLite众所周知 是个文件数据库

  • 非常厉害的全文检索技术Elasticsearch

    目录 一 Elasticsearch是什么 二 关于安装 三 kibana的安装和使用 最后 今天是刘小爱自学Java的第157天 感谢你的观看 谢谢你 全文检索技术Elasticsearch的学习 牵扯到的知识点太多太多了 首先要创建一个

  • Cadence Allegro PCB设计88问解析(九) 之 Allegro中封装(footprint)3D模型添加

    一个学习信号完整性的layout工程师 今天整理下PCB封装的3D 模型添加 此步骤并不是所有的公司使用 因为我们平常给器件添加一个实际的高度 就已经OK了 只不过我们在看整版的3D模型是 每个器件都是方方正正的 不太美观 所以有的人要求完

  • JavaScript基础

    编程之修 重在积累 而非资质 资质虽然重要 可是后天的努力更不可缺少 直接量 编程世界中的直接量 就是表面上可以见到的数据值 常见的直接量有数字 小数 字符串 字符串的出现必然带着双引号 单引号也可以 被很好地包裹住 而数字则是光秃秃的 如

  • 解决Opencv高低版本不兼容问题

    分享一下我老师大神的人工智能教程 零基础 通俗易懂 http blog csdn net jiangjunshow 也欢迎大家转载本篇文章 分享知识 造福人民 实现我们中华民族伟大复兴 目前OpenCV版本已更新到2 4 由此出现了一系列问

  • Qt之QSS中替代background-position的方法。

    学过css的朋友 应该都多少了解一些雪碧图相关的知识 雪碧图 用的就是background position来确定选取的素材位置 比如 素材中每张扑克的宽高分别为49px 66px 如果我要选用红桃8 我就会在css中写 backgroun

  • Gradle sync failed: A problem occurred configuring project ‘:app‘解决方法

    在terminal 中输入 gradlew i 查看详细信息 输出信息 NDK is missing a platforms directory If you are using NDK verify the ndk dir is set

  • vue项目中使用iconfont阿里图标库

    1 进入icon 官网 iconfont 阿里巴巴矢量图标库 2 根据搜索选择自己想要的图片 添加到项目中或者新建项目 如下图 3 添加之后如下图 点击下载至本地 4 下载本地解压后的文件如下图 5 在vue项目中 css新建一个文件夹 把

热门标签