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;分享给大家看看 一、问题引入…

IP分片和TCP分段的区别

1.MTU(Maximum Transmission Unit&#xff0c;MTU)&#xff0c;最大传输单元 &#xff08;1&#xff09;以太网和802.3对数据帧的长度都有一个限制&#xff0c;其最大值分别是1500和1492个字节。链路层的这个特性称作MTU。不同类型的网络大多数都有一个上限。如果IP层有一个数…

求素数: 一般线性筛法 + 快速线性筛法

From: http://blog.csdn.net/dinosoft/article/details/5829550 素数总是一个比较常涉及到的内容&#xff0c;掌握求素数的方法是一项基本功。 基本原则就是题目如果只需要判断少量数字是否为素数&#xff0c;直接枚举因子2 。。N^(0.5) &#xff0c;看看能否整除N。 如果需要…

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

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

安装了cnpm,还是报错cnpm : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本。

当我安装了cnpm 但是使用的时候还是报错&#xff1a; 解决方法&#xff1a; 1、以管理员身份打开Windos PowerShell 2、输入“ set-ExecutionPolicy RemoteSigned”回车 3、根据提示&#xff0c;输入A或Y&#xff0c;回车 4、再次执行cnpm -v&#xff0c;即可看到提示版本…

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…

原始套接字抓取所有以太网数据包与分析

If you have any idea, just send comments to me. ####1.原始套接字介绍 关于socket使用客户机/服务器模型的 SOCK_STREAM 或者 SOCK_DGRAM 用于 TCP 和 UDP 连接的应用更为普遍一些&#xff0c;而如果考虑到从网卡中直接捕获原始报文数据就需要用到原始套接字 SOCK_RAW 类型…

Go在谷歌:以软件工程为目的的语言设计

From: http://www.oschina.net/translate/go-at-google-language-design-in-the-service-of-software-engineering 1. 摘要 (本文是根据Rob Pike于2012年10月25日在Tucson, Arizona举行的SPLASH 2012大会上所做的主题演讲进行修改后所撰写的。) 针对我们在Google公司内开发软件…

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

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

运维工程师必会的109个Linux命令

运维工程师必会的109个Linux命令 版本1.0 崔存新 更新于2009-12-26 目录 1 文件管理 6 1.1 basename 6 1.2 cat 6 1.3 cd 7 1.4 chgrp 7 1.5 chmod 8 1.6 chown 9 1.7 comm 10 1.8 cp 10 1.9 cut 11 1.10 dd 12 1.11 diff 13 1.12 dir 14 1.13 dos2unix 16 1.14 egrep 17 1.15…

网卡混杂模式介绍与设置

1.混杂模式介绍 混杂模式就是接收所有经过网卡的数据包&#xff0c;包括不是发给本机的包。默认情况下网卡只把发给本机的包&#xff08;包括广播包&#xff09;传递给上层程序&#xff0c;其它的包一律丢弃。简单的讲,混杂模式就是指网卡能接受所有通过它的数据流&#xff0c…

eclipse使用技巧---使用正则表达式查找替换

1&#xff0c;Eclipse ctrlf 打开查找框2&#xff0c;选中 Regular expressions (正则表达式)去掉/* */(eclipse) /\*(.|[\r\n])*?\*/去掉//(eclipse) //.*$去掉import(eclipse) import.*$去掉空行(eclipse) ^\s*\n去掉空行(ue) …

​浅拷贝与深拷贝​

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

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

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

[python-thirdLib] Python中第三方的用于解析HTML的库:BeautifulSoup

From: http://www.crifan.com/python_third_party_lib_html_parser_beautifulsoup/ 背景 在Python去写爬虫&#xff0c;网页解析等过程中&#xff0c;比如&#xff1a; 如何用Python&#xff0c;C#等语言去实现抓取静态网页抓取动态网页模拟登陆网站 常常需要涉及到HTML等网…

VMware 常见使用问题梳理

1.“Transport(VMDB)error -44:Message” 这种情况说明虚拟机的一个服务没有开启&#xff0c;在本机中找到服务&#xff1a;“打开运行”-“services.msc”回车。找到VMware Authorization Service这个服务&#xff0c;启动起来就OK了。 2.提示”此虚拟机被配置为64位操作系统…

图灵社区 : 阅读 : 谁说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页面&…