前端自定义icon的方法(Vue项目)

第一步:进入在线的编辑器进行设计

好用:百度字体编辑器

比如先导入有个ttf文件

添加新字体

 双击每个模块进入编辑区域

更改相应的信息,比如name

 编辑完了进行导出文件(各种格式就行了)就行了

 第二步:在项目中asset文件储存这些文件,或者单独在src放一个文件夹也行

文件放入文件夹

为什么要生成这么多文件呢?因为有些在某些浏览器支持,有些不支持

所以有的时候你使用的时候发现不生效,那么你需要生成对应的浏览器文件

第三步:自定义样式 

在style文件夹里边引入相关文件进行样式定义


@font-face {font-family: "iconfont"; /* Project id 3381904 */src: url('../font/iconfont.woff2?t=1653990903917') format('woff2'),url('../font/iconfont.woff?t=1653990903917') format('woff'),url('../font/iconfont.ttf?t=1653990903917') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-download:before {content: "\e7f0";
}

使用时候的样式是这样的

代码

<i class="iconfont icon-download"/>

 总结

使用的话我们可以使用图标自定义,更加灵活,尤其大项目。

今天是背景下雪的第三天,趁着雪景写博客饶有兴致,希望对大家有所帮助!!! 

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

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

相关文章

【PS】修改 图片 文字

修改文字 1&#xff1a;框选要修改的文字 选择-色彩范围 调整色彩容差能看见字体的时候就OK&#xff08;记住用吸管吸取文字颜色&#xff09; 2&#xff1a;选择-修改-扩展-像素2 3&#xff1a;编辑-内容识别填充 现在文字去除了。 用污点画笔修复工具&#xff0c;对缺陷进行…

Meta 新推出的实时语音翻译模型 Seamless

项目简介 SeamlessM4T 是我们基础的一体式大规模多语言和多模式机器翻译模型&#xff0c;可为近 100 种语言的语音和文本提供高质量翻译。 SeamlessM4T 模型支持以下任务&#xff1a; 语音到语音翻译 (S2ST) 语音到文本翻译 (S2TT) 文本到语音翻译 (T2ST) 文本到文本翻译 (…

大语言模型:开启自然语言处理新纪元

导言 大语言模型&#xff0c;如GPT-3&#xff08;Generative Pre-trained Transformer 3&#xff09;&#xff0c;标志着自然语言处理领域取得的一项重大突破。本文将深入研究大语言模型的基本原理、应用领域以及对未来的影响。 1. 简介 大语言模型是基于深度学习和变压器&…

微信小程序代码包限制2M 怎么解决?

微信小程序代码包限制为2MB主要是为了保证小程序的加载速度和用户体验&#xff0c;但对于一些大型复杂的小程序来说&#xff0c;这个限制可能会成为开发的难点。以下是几种常见的解决方法&#xff1a; 代码压缩&#xff1a;可以通过使用webpack等工具进行代码压缩&#xff0c;从…

C++STL中string详解(零基础/小白,字符串)

目录 1. 基本概念&#xff1a; 1.1 本质&#xff1a; 1.2 string和char*区别&#xff1a; 1.3 特点&#xff1a; 2. 构造函数(初始化) 3. 赋值操作 4. 字符串拼接 ​编辑 5 查找 和 替换 6. 字符串比较 ​编辑 7. 字符存取 8. 插入和删除 ​编辑 9. 子串获取 1. 基…

Mysql索引优化实战(二)

分页查询优化 示例表&#xff1a; CREATE TABLE employees (id int(11) NOT NULL AUTO_INCREMENT,name varchar(24) NOT NULL DEFAULT COMMENT 姓名,age int(11) NOT NULL DEFAULT 0 COMMENT 年龄,position varchar(20) NOT NULL DEFAULT COMMENT 职位,hire_time timestamp …

AIGC | Embeddings解析之word2vec训练过程演示

目录 一、word2vec 二、Embedding过程 三、计算向量之间相似性 四、word2vec模型的训练过程 五、总结 嵌入&#xff08;Embeddings&#xff09;是机器学习领域中的一个概念&#xff0c;主要用于将高维的数据转化为低维空间&#xff0c;以便于算法更好地处理和理解数据。嵌…

MATLAB六轴机械臂机器人的动力学分析

1、概述 动力学以牛顿第二定律为核心&#xff0c;这个定律指出了力、加速度、质量三者间的关系。 质点动力学有两类基本问题&#xff1a; 一是已知作用于质点上的力&#xff0c;求质点的运动&#xff0c;这个就是正动力学。 二是已知质点的运动&#xff0c;求作用于质点上的力…

ubantu22.04.3 安装4080驱动

新电脑安装驱动网卡EX211只适配22.04的内核&#xff0c;其他系统升级内核易出问题不推荐。 安装系统为系统盘安装制作Ubuntu22.04启动盘_ubuntu下制作pe启动盘-CSDN博客&#xff0c;参考此作者&#xff0c;选择系统为22.04.3 其他版本不推荐因前面用22.04安装显卡后出现兼容性…

GEM5 McPAT NoC教程: xml设置汇总-2023版

简介 McPAT的xml有一些参数需要设置&#xff0c;noc的部分很多Gem5ToMcpatparser没有设置&#xff0c;也没有给出如何设置的条件。尤其是和活动相关的total access&#xff0c;不知道具体怎么设置&#xff0c;也不知道如何从gem5 stats.txt中导出。本文提供了2023年的收集到ge…

EasyExcel读取Excel数据(含多种方式)

目录 EasyExcel简介 使用EasyExcel进行读数据 引入依赖&#xff1a; EasyExcel提供了两种读取模式 使用 监听器 读取模式 1.创建一个实体类 2.创建监听器 代码 使用 同步读 读取模式 1.创建一个实体类 2.代码 添加导入数据库的逻辑 其实官方文档讲得很清楚&#xff…

用友NC word.docx任意文件读取漏洞

文章目录 产品简介漏洞概述指纹识别漏洞利用修复建议 产品简介 用友NC是一款企业级ERP软件。作为一种信息化管理工具&#xff0c;用友NC提供了一系列业务管理模块&#xff0c;包括财务会计、采购管理、销售管理、物料管理、生产计划和人力资源管理等&#xff0c;帮助企业实现数…

代码随想录第三十三天(一刷C语言)|斐波那契数爬楼梯使用最小花费爬楼梯

创作目的&#xff1a;为了方便自己后续复习重点&#xff0c;以及养成写博客的习惯。 动态规划步骤&#xff1a; 确定dp数组以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举例推导dp数组 一、斐波那契数 思路&#xff1a;参考carl文档 1、dp[i]的定义为&#xff…

mysql驱动和druid连接池总结

mysql-connector-java和druid在yml文件中的工作方式主要涉及到数据库连接和连接池管理。 1. mysql-connector-java&#xff1a;这是MySQL的JDBC驱动&#xff0c;它允许Java应用程序与MySQL数据库进行交互。在Spring Boot应用程序中&#xff0c;你需要在pom.xml文件中添加mysql-…

详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第二节 (鸿蒙Stage模型 登录页面 JS版)

实现登录功能主要逻辑包括: 导入需要的组件定义登录页面 渲染界面登录方法忘记密码方法 启用登录页面 一、功能介绍 本登录功能通过Stage框架实现了一个标准的用户名密码登录交互。支持账号密码输入,校验和存储,以及登录成功后的页面跳转。同时处理了常见的异常情况,如输入…

JMeter逻辑控制器

JMeter逻辑控制器 一、IF控制器1、作用2、步骤 二、循环控制器1、作用2、步骤3、线程组和循环控制器的区别&#xff1f; 三、ForEach控制器1、作用2、步骤 一、IF控制器 1、作用 **控制下面的测试元素是否执行**2、步骤 添加线程组用户定义的变量添加if控制器&#xff0c;判断…

动态内存管理,malloc和calloc以及realloc函数用法

目录 一.malloc函数的介绍 malloc的用法 举个例子 注意点 浅谈数据结构里的动态分配空间 二.calloc函数的介绍 三.realloc函数的介绍 四.柔性数组的介绍 为什么有些时候动态内存函数头文件是malloc.h,有些时候却是stdlib.h 一.malloc函数的介绍 malloc其实就是动态开辟…

workFlow c++异步网络库编译教程与简介

如果觉得写的可以,请给一个点赞关注支持一下 C异步网络库workflow入门教程(1)HTTP任务 C异步网络库workflow系列教程(2)redis任务 C异步网络库workflow系列教程(3)Series串联任务流 简介 搜狗公司C服务器引擎&#xff0c;编程范式。支撑搜狗几乎所有后端C在线服务&#xf…

老卫带你学---leetcode刷题(29. 两数相除)

29. 两数相除 问题 给你两个整数&#xff0c;被除数 dividend 和除数 divisor。将两数相除&#xff0c;要求 不使用 乘法、除法和取余运算。 整数除法应该向零截断&#xff0c;也就是截去&#xff08;truncate&#xff09;其小数部分。例如&#xff0c;8.345 将被截断为 8 &…

云原生之深入解析Kubernetes中服务的性能

一、Pyroscope 简介 ① 什么是 Pyroscope&#xff1f; 开发人员通常需要查看生产应用程序中的性能瓶颈以确定问题的原因&#xff0c;为此通常需要可以通过日志和代码工具收集的信息。不幸的是&#xff0c;这种方法通常很耗时&#xff0c;并且不能提供有关潜在问题的足够详细信…