vue项目引入字体图标iconfont

直接将icon下载成图片使用或者通过import方式移入url使用,看此篇

本文介绍两种使用方案:1.使用Font class引入字体图标(推荐) 2.使用Symbol 引用
如果是分批次的下载了好几次字体图标,那么可以将解压的代码css等文件放在不同的文件夹内,分别引入使用即可

准备工作:登入阿里字体图标库

选择图标加入购物车在这里插入图片描述
下载代码:在这里插入图片描述

一、解压后,将除了html的文件都复制一份到自己项目assets下:

在这里插入图片描述

二、点击打开之前解压的html文件

在这里插入图片描述

三、main.sj下引入字体图标样式:

在这里插入图片描述

四、两种使用方案

方案1:通过Font class引入字体图标,类名修改字体图标的大小和颜色(推荐此方法:可改变图标大小和颜色)
步骤:1.1先使用<span class="iconfont icon-类名"></span> 引入;
1.2.再通过对应class类名修改css样式;
在这里插入图片描述
在这里插入图片描述

方案2:使用Symbol 引用(此方法,svg对于原图标有颜色的,会自动带入颜色,同时修改不了其颜色;对于无颜色的图标,可修改颜色;)

2.1.先在app.vue下引入通用 CSS 代码(引入一次就行);
通用 CSS 代码:

<style>
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

2.2.在对应页面的下使用svg引入图标;
svg代码:在这里插入图片描述

2.3.也可以给svg添加类名修改图标样式:(此方法,svg对于原图标有颜色的,会自动带入颜色,同时修改不了其颜色;对于无颜色的图标,可修改颜色;)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Why is processing a sorted array faster than an unsorted array?

这是我在逛 Stack Overflow 时遇见的一个高分问题&#xff1a;Why is processing a sorted array faster than an unsorted array?&#xff0c;我觉得这是一个非常好的用来讲分支预测&#xff08;Branch Prediction&#xff09;的例子&#xff0c;分享给大家看看 一、问题引入…

uni-app微信小程序uni.getLocation获取位置;authorize scope.userLocation需要在app.json中声明permission;小程序用户拒绝授权后重新授权

需求&#xff1a;点击按钮获取当前微信位置&#xff0c;以及点击拒绝授权后&#xff0c;下次点击还可以拉起授权窗口&#xff1b; 拒绝授权后重新拉起授权操作&#xff1a; 直接授权操作&#xff1a; 一、问题1&#xff1a;报authorize scope.userLocation需要在app.json中声明…

PHP代码审计之反序列化攻击链CVE-2019-6340漏洞研究

关键词 php 反序列化 cms Drupal CVE-2019-6340 DrupalKernel 前言 简简单单介绍下php的反序列化漏洞 php反序列化漏洞简单示例 来看一段简单的php反序列化示例 <?phpclass pingTest {public $ipAddress "127.0.0.1";public $isValid False;public $output…

Portal-Basic Java Web 应用开发框架:应用篇(八) —— 整合 Freemarker

Portal-Basic Java Web应用开发框架&#xff08;简称 Portal-Basic&#xff09;是一套功能完备的高性能Full-Stack Web应用开发框架&#xff0c;内置稳定高效的MVC基础架构和DAO框架&#xff08;已内置Hibernate、MyBatis和JDBC支持&#xff09;&#xff0c;集成 Action拦截、F…

日常遇到的小问题

日常开发过程中&#xff0c;总会遇到各种小问题&#xff0c;特此记录下各种解决。 1. eclipse中部署项目到tomcat&#xff0c;启动tomcat时报错&#xff1a;  Resource is out of sync with the file system: ................ 太长只截取前一段&#xff0c;解决办法&#xff…

微信小程序,用户拒绝授权后重新授权;uni-app小程序,用户拒绝授权后点击无效;重新进入后拉起位置授权框;

问题&#xff1a;当用户第一次进入小程序&#xff0c;点击授权按钮后&#xff0c;点了拒绝&#xff0c;再次点击不会出现授权页面&#xff0c;只有再次进入小程序的时候&#xff0c;才会出发请求授权 。 案例&#xff1a; 假如我们获取微信位置&#xff0c;第一次点击的时候弹起…

​浅拷贝与深拷贝​

浅拷贝 与深拷贝 一、数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined&#xff0c;Symbol)和对象数据类型。 基本数据类型的特点&#xff1a;直接存储在栈(stack)中的数据 引用数据类型的特点&#xff1a;存储的是该对象在栈中引用&#xff0c;真实…

更改微信小程序的基础版本库;更改uni-app小程序基础库;更改用户的微信小程序基础库最低版本;设置用户的微信小程序版本库;

需求场景&#xff1a;微信小程序不少API都有最低版本支持&#xff0c;为了避免不必要的麻烦&#xff0c;我们可以根据需要给小程序设置基础库最低版本&#xff0c;这样若用户使用的基础库版本低于设置的最低版本要求&#xff0c;则无法正常使用小程序&#xff0c;并提示更新微信…

图灵社区 : 阅读 : 谁说Vim不是IDE?(三)

图灵社区 : 阅读 : 谁说Vim不是IDE&#xff1f;&#xff08;三&#xff09;Powerline1、下载地址https://github.com/Lokaltog/vim-powerline2、功能说明Powerline是Vim的一个非常漂亮的状态栏插件&#xff0c;安装了Powerline之后&#xff0c;Vim底部将会出现一个增强型状态栏…

uni-app小程序onShow执行两次;微信小程序onShow重复执行原因;导航栏tabBar页的onLoad函数不执行;App.vue页的onShow执行原因;onShow莫名其妙执行

1.只有五种情况会触发导航栏tabBar页的onLoad函数&#xff0c;分别是&#xff1a; –1.1&#xff1a;首次进入到导航栏tabBar页面&#xff1b; –1.2&#xff1a;从微信分享进入的导航栏tabBar页面&#xff1b; –1.3&#xff1a;识别二维码跳转到小程序的导航栏tabBar页面&…

用fiddler抓包小程序

第一步&#xff1a;安装fiddler,保证手机和PC端在同一个wifi下&#xff1b; 第二步&#xff1a;设置属性按图勾选第三步&#xff1a;以上两步设置完后&#xff0c;重启下fiddler(解决本地服务器不能访问)&#xff0c;然后查看本地IP地址第四步&#xff1a;手机设置HTTP代理 我的…

微信小程序保存图片到相册;uni-app小程序保存网络图片到相册;小程序保存图片到相册拒绝授权后重新拉起授权;保存图片到系统相册;小程序保存图片测试可以,真机保存图片失败

文末代码可以直接复制使用&#xff0c;图片修改成你的图片路径即可 一、场景&#xff1a; 小程序点击按钮&#xff0c;保存项目内的静态图片或者微信头像或者后端返回的图片&#xff1b; 二、注意点及思路拆分&#xff1a; –2.1&#xff1a;小程序保存图片功能&#xff0c;必须…

关于单片机中断

中断&#xff1a;CPU停止当前任务&#xff0c;去处理中断内容&#xff0c;处理完后自动恢复以前任务。 单片机有5个中断源&#xff0c;2个中断优先级&#xff0c;中断受两级控制&#xff1a; 1、CPU开总中断&#xff1b; 2、中断源开中断。 中断源&#xff1a;引起中断事件的类…

转:探索 AIX 6:在 AIX 6 上配置 iSCSI Target

引言iSCSI&#xff08;Internet Small Computer System Interface&#xff09;被业界认为是非常廉价的 SAN 解决方案&#xff0c;一直在中低端应用领域被市场所看好。 iSCSI 客户端和服务端都既可以通过硬件方式实现&#xff0c;也能通过软件方式的&#xff0c;其优劣区别就是在…

uni-app微信小程序生成自定义参数二维码,跳转小程序指定页面,获取参数;uni-app微信小程序获取二维码自定义参数;微信小程序生成动态参数二维码;uni-app微信小程序获取动态参数二维码;

一、场景需求&#xff1a; 在小程序个人名片页面A页面&#xff0c;生成用户的个人名片二维码&#xff08;该二维码携带用户的唯一标识id&#xff09;&#xff1b;微信扫一扫或长按图片识别这个二维码&#xff0c;可以跳转到小程序的B页面&#xff0c;并且在B页面拿到二维码上的…

【view桌面虚拟化系列】1-vSphere搭建

本系列一共三章&#xff0c;具体如下&#xff1a; 【view桌面虚拟化系列】1-vSphere搭建 【view桌面虚拟化系列】2-View搭建 【view桌面虚拟化系列】3-VDI实现 实验的目的:测试vsphere5.1a、view5.1测试整体运行状况。 首先介绍下环境&#xff08;所使用域名&#xff1a;vmc.co…

uni-app微信小程序保存页面到相册;canvas保存小程序页面;微信小程序保存二维码活动页面到相册;微信小程序canvas 生成海报保存到相册;canvas绘制小程序页面保存及分享;

文末代码可以直接复制运行&#xff08;只需要将中间的二维码图片、底部的微信和相册图片和微信头像配置白名单 改成你项目内的img图片即可成功运行&#xff09; 一、场景&#xff1a;在微信小程序 个人名片页面 含有微信头像和个人信息二维码&#xff08;识别可跳转小程序指定页…

面试经验谈架构

##################################################### #本文内容来自《老男孩linux运维实战培训》学生—郑东旭 #如有转载&#xff0c;请务必保留本文链接及本版权信息。 #欢迎广大运维同仁一起交流linux/unix网站运维技术! #QQ:919953500#E-mail:weilandeshanhuhai126.com …

微信小程序uni.switchTab传参获取不到;小程序跳转到tabBar页并传参;uni-app微信小程序获取tabBar页面参数失败;uni-app微信小程序tabBar页面onLoad不执行

需求场景&#xff1a;从非tabBar页面B跳转到tabBar页面A&#xff0c;并想要携带参数。 如果使用uni.switchTab传参&#xff0c;会导致tabBAE页面获取不到参数&#xff1b; 原因&#xff1a; 官方文档有说&#xff0c;uni.switchTab路径后不能带参数&#xff1b; uni.navigateT…

UIView的旋转iOS开发

更多阅读请访问http://www.hopean.com 有关UIView坐标变换的&#xff0c;但是经常不能得到自己想要的效果&#xff0c;今天就把它仔细研究了下。记下来等以后忘记的时候再复习 重写shouldAutorateToInterfaceOrientation:&#xff0c;限制某个方向会改变原点的位置&#xff0c;…