如何在前端项目中用字体图标替换图片，方便减小打包体积和统一切换颜色

最新推荐文章于 2024-06-20 20:20:21 发布
最新推荐文章于 2024-06-20 20:20:21 发布
阅读量139 收藏 3
点赞数 5
文章标签： javascript css HTML html 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43811753/article/details/139804464
版权

1.进入阿里妈妈矢量图标图库

地址：阿里妈妈矢量图

2.搜索自己想要的图标

在这里插入图片描述

3.添加自己想要的图标

在这里插入图片描述

4.把刚才选的图标，添加到自己要下载的项目

在这里插入图片描述

5.把项目下载到本地

在这里插入图片描述

6.引入iconfont.css

在这里插入图片描述
在这里插入图片描述
在div上增加对应的类名就可以啦
在这里插入图片描述
下载的所有类名都在下面的demo_index.html里面啦
在这里插入图片描述
通过以上方式即可完成前端字体图标的下载和使用啦
最后打个广子：欢迎访问我搭建的GPT4o/GPT其他模型/AI绘画网站：aicnn

吉吉安
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在Webpack中用url-loader处理图片和字体
01-08
默认webpack无法处理css文件中的url地址 在打包时会报错 无论是图片还是字体库 只要是url地址 都无法处理 解决方法： 在项目根目录下输入cnpm i url-loader file-loader -D 安装url-loader和file-loader (url-loader...
在Webpack中用url-loader处理图片和字体的问题
11-21
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 一、处理图片文件 默认webpack无法处理css文件中的url地址 在打包时会报错 无论是...
14万字面试题汇总整理，祝你顺利斩获大厂前端offer
孙叫兽的博客
07-17 1万+
Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是—种要求严格的DTD(Document Type Definition)，不允许使用任何表现层的语法， 混杂模式是—种向后兼容的解析方法。 触发标准模式或者说严格模...
2024前端面试题总汇（持续更新中...）
Monsters___的博客
09-26 1万+
前端面试八股文大全！！！！！
常见的前端面试题【90道】
热门推荐
qq_50294652的博客
06-08 2万+
1、vue的基本原理2、说说你对盒子模型的理解？3、说说javascript都有哪些数据类型，如何存储的？4、如何理解响应式，实现响应式的方法有哪些？有什么区别？5、Css性能优化有哪些常见的方法？具体如何实现？6、判断数据类型的方法有哪些？有什么区别？7、说说你对事件循环的理解？8、说说你对BOM的理解，BOM的核心都有哪些？作用是什么9、Bind,call,apply有什么区别？如何实现一个bind方法？10、如何理解闭包？闭包的应用场景是？11、说说你对同步和异步的区别的理解？
【前端收藏】前端小作文-前端八股文知识总结（超万字超详细）持续更新
天天打码-16年老码农
02-04 1191
渲染引擎(Layout Engine或Rendering Engine)和js引擎渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
在MySQL中用正则表达式替换数据库中的内容的方法
09-11
本文将详细介绍在MySQL中用正则表达式替换数据库中的内容的方法。 MySQL正则表达式替换的基本语法 ----------------------------- 在MySQL中，用正则表达式替换数据库中的内容主要通过使用REGEXP和REPLACE函数来...
Python中用pyinstaller打包时的图标问题及解决方法
09-17
主要介绍了python中用pyinstaller打包时的图标问题及解决方法，本文从两方面给大家分析原因所在，通过截图实例代码给大家介绍的非常详细,需要的朋友可以参考下
Day43
最新发布
m0_67496588的博客
06-20 532
JSON，Ajax
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 357
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1505
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 352
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 237
【element 】修改下拉菜单
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 898
Vue在表单校验中trigger属性指定何时触发校验规则
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
mqiqe的专栏
06-14 343
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。
Vue3：解决在main.ts 中调用自定义的js文件会报错的问题
SUMMERENT的博客
06-14 178
案例：Vue3 ，使用的是main.ts ，在main.ts 中调用自定义的ruoComment.js文件会报错，解决报错：找到tsconfig.json文件。//1.将输出结构重定向到目录。,//2.编译时允许有js }加上如下代码：即可解决问题。,//3.添加路径支持js。
vue格网图
南北粉面馆
06-16 312
【代码】vue格网图。
uniapp 仿写弹窗
weixin_45881304的博客
06-13 630
【代码】uniapp 仿写弹窗。
在已写好的前端项目中用node写接口
03-27
要在已经存在的前端项目中使用Node.js编写接口，需要按照以下步骤进行操作： 1. 安装Node.js和npm：在Node.js官网下载安装包，安装完成后会自带npm。 2. 创建一个新的目录，在该目录下使用npm初始化一个新的项目。 3. 安装需要的依赖库，例如Express、Body-parser等。 4. 在项目中创建一个server.js文件，编写自己的接口逻辑。 5. 使用Express创建一个服务器，并监听指定端口。 6. 测试接口是否能够正常工作。 7. 将前端代码中需要用到的接口地址指向Node.js服务器的地址。 8. 在前端代码中调用接口，获取数据并进行展示。 示例代码如下： ```javascript // server.js const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.get('/api/hello', (req, res) => { res.send('Hello World!'); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 在前端代码中，可以使用fetch或axios等库来调用接口： ```javascript fetch('/api/hello') .then(response => response.text()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` 这样就可以在已有的前端项目中使用Node.js编写接口了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吉吉安

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值