vue中 字体图标引入 - iconfont阿里字体图标库

官网:iconfont-阿里巴巴矢量图标库

代码应用中,有许多方法,如何使用该图标库。如,icon单个使用、unicode引用、或 font-class引用(推)、symbol(svg合集)。本文主讲 font-class 方法。

font-class引用

支持ie8+,及所有浏览器

1. 获得项目下面的 fontclass 代码

加入库 -> 选择完所需的图标后,右上角的购物车 -> 添加到项目 -> 自动跳转至 我的项目,点击Font class -> 点击复制代码(!!这个才是你项目的代码

2.  在项目的 index.html 文件中导入,链接为1.中的fontclass代码

<link rel="stylesheet" href="fontclass代码" />

3. 使用 - 在页面中,使用 <i class='iconfont icon-xxx'></i> 进行应用(其中,iconfont是基础样式类名,icon-xxx是具体目标类名)

 

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

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

相关文章

Git(9)——Git多人协同开发之创建初始项目

目录 一、简介 二、创建新项目 三、本地Git接入 四、创建远端仓库——Gitee 五、推送代码至远端仓库 一、简介 前面8章都是我们一个人独自开发&#xff0c;如果现在项目新增两名同事&#xff0c;我们就需要使用Git来实现多人协同开发&#xff0c;从第九章开始将介绍从零到…

Jenkins教程—构建多分支流水线项目

本教程向你展示如何使用Jenkins协调一个用 Node Package Manager (npm) 管理的简单 Node.js 和 React 项目&#xff0c; 并同时 为开发和产品环境交付不同的结果。 在开始本教程之前&#xff0c;建议你前往 教程概览 页面&#xff0c;并至少完成一个 介绍教程&#xff0c; 从而…

利用红黑树封装map和set

目录 一、正向迭代器1.1 operator1.2 operator--1.3 参考代码 二、反向迭代器三、封装set四、封装map五、底层红黑树的实现 一、正向迭代器 我们之前vector&#xff0c;list这些都是容器的迭代器都是简单的指针或者_node_node->next这样的&#xff0c;那是因为它们要么是连…

背包问题---怎么选取物品,可以使得背包装的物品价值最大?

原文&#xff1a; https://zhuanlan.zhihu.com/p/567560364 1&#xff09;0-1背包问题的描述 现在有四种物品&#xff0c;每种物品只有1件&#xff0c;它们的重量与价值如下表。 现在有一个背包&#xff0c;总容量为8。问怎么选取物品&#xff0c;可以使得背包装的物品价值…

yolov5添加ECA注意力机制

ECA注意力机制简介 论文题目&#xff1a;ECA-Net: Efficient Channel Attention for Deep Convolutional Neural Networks 论文地址&#xff1a;here 基本原理 &#x1f438; ECANet的核心思想是提出了一种不降维的局部跨通道交互策略&#xff0c;有效避免了降维对于通道注意…

【力扣每日一题】2023.9.12 课程表Ⅳ

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 今天是课程表系列题目的最后一题&#xff0c;因为我在题库里找不到课程表5了&#xff0c;所以今天的每日一题就是最后一个课程表了。 题…

关于Arcgis这62个常用技巧,你知道几个?

小编推荐&#xff1a;ArcGIS类全领域教程推荐https://mp.weixin.qq.com/s?__bizMzU0MDQ3MDk3NA&mid2247560279&idx5&sn8ac52cabeb8c7e3b2c083e07ef6056da&chksmfb3b1786cc4c9e909bab16dd99e88e5f5f9816eb2349d6d73a68a137a5264aa606b2035d7b3e&token16747…

c++ 中的函数指针

以下图片演示了c中函数指针的用法。如下图可见&#xff0c;把函数地址赋值给函数指针&#xff0c;用函数名或者函数名的地址&#xff0c;都可以&#xff0c;c编译器不报错。即 ptr f 和 ptr &f 都对。但准确的话&#xff0c;函数名就是地址&#xff0c;在编译时候&#x…

2023-9-14 最长公共子序列

题目链接&#xff1a;最长公共子序列 #include <iostream> #include <algorithm>using namespace std;const int N 1010;int n, m; char a[N], b[N]; int f[N][N];int main() {cin >> n >> m;cin >> a 1 >> b 1;for(int i 1; i < n…

代理HTTP使用不当会出现哪些问题?如何正确使用代理服务?

代理HTTP是一种常见的网络代理方式&#xff0c;它为客户端和服务器之间提供中间层&#xff0c;转发上下游的请求和响应。正确使用代理HTTP可以提高采集效率、增加网络安全性、加速网络速度、保护用户隐私。但是&#xff0c;使用不当就难以达到预期的效果&#xff0c;在使用代理…

langchain+GPT+neo4j 图数据库

neo4j版本是5.11.0,langchain的版本 0.0.288下载apoc插件 https://neo4j.com/docs/apoc/current/installation/ neo4j.conf文件把apoc.*添加到dbms.security.procedures.unrestricted配置项 使用return apoc.version()来查看是否安装成功 pip install neo4j图 参考官网&…

vue中预览xml并高亮显示

项目中有需要将接口返回的数据流显示出来&#xff0c;并高亮显示&#xff1b; 1.后端接口返回blob,类型为xml,如图 2.页面中使用pre code标签&#xff1a; <pre v-if"showXML"><code class"language-xml">{{xml}}</code></pre> …

Spring源码分析(三) bean的生命周期 getBean()和doGetBean()

b、在中篇会正式经历一套生命周期流程 getBean() -> doGetBean() -> createBean() -> doCreateBean() -> createBeanInstance() -> populateBean() -> initializeBean() 流程 1、AbstractBeanFactory#getBean() 此处开始进行对象的获取也就是核心步骤 Overr…

shell脚本学习笔记02(小滴课堂)

可以在home目录下创建一个shell.sh文件。 按w进入命令行模式。按i进入插入模式。如果想返回命令行模式&#xff0c;按esc即可。然后可以使用x和dd进行删除内容。 在插入模式下我们点击esc键&#xff0c;再去按:键&#xff0c;我们就可以进入到底行模式了&#xff1a; 可以设…

PHP实现微信小程序状态检测(违规、暂停服务、维护中、正在修复)

实现原理 进入那些状态不正常的小程序会被重定向至一个Url&#xff0c;使用抓包软件抓取这个Url&#xff0c;剔除不必要参数&#xff0c;使用cURl函数请求网页获得HTML内容&#xff0c;根据内容解析出当前APPID的小程序的状态。 代码 <?php// 编码header(Content-type:ap…

数据库被攻击需要注意什么

没想到自己用了一个简单的腾讯虚拟机&#xff0c;里面自己安装了一个 MySQL 数据库也会被黑客攻击。 一、问题现象 小程序访问不了&#xff0c;后台程序报数据库相关的错误。 查看数据库&#xff0c;发现数据库被篡改。 二、问题原因 1、为了可以远程能够访问数据库&#xf…

基于Qt4开发曲线绘制交互软件Plotter

目前市面上有很多曲线绘制软件,但其交互功能较差。比如,想要实现数据的交互,同步联动等,都需要大量繁琐的人工操作。所以讲想开发一款轻量级的曲线绘制交互软件。下面就以此为案例,记录一下基于Qt4的开发过程。 目录 1 需求 2 技术路线 3 开发流程 1 框架搭建 2 菜单…

首家!亚信科技AntDB数据库完成中国信通院数据库迁移工具专项测试

近日&#xff0c;在中国信通院“可信数据库”数据库迁移工具专项测试中&#xff0c;湖南亚信安慧科技有限公司&#xff08;简称&#xff1a;亚信安慧科技&#xff09;数据库数据同步平台V2.1产品依据《数据库迁移工具能力要求》、结合亚信科技AntDB分布式关系型数据库产品&…

[每周一更]-(第61期):Rust入门策略(持续更新)

一门语言的学习&#xff0c;就要从最基本的语法开始认识&#xff0c;再分析不同语言的区别&#xff0c;再加上实战&#xff0c;才能更快的学会&#xff0c;领悟到作者的设计思想&#xff1b; 介绍 Rust编程练习 开发工具VSCode及插件 社区驱动的 rust-analyzerEven Better T…

Java基于SpringBoot的闲一品交易平台

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 大家好&#xff0c;我是程序员徐师兄、今天给大家谈谈基于android的app开发毕设题目&#xff0c;以及基于an…