css引入矢量图标_WEB 项目开发中的图标管理解决方案

相信很多前端开发人员在项目开发过程中都会遇到这样一个问题:页面的图标发生改动,需要往图标文件中追加新的图标,却因为图标文件已经打包好而无从下手,重新制作一份图标文件吧,要考虑替换整个项目的图标,工程量太大,有一种牵一发而动全身的感觉,之所以会造成这种尴尬的局面呢,是因为项目开发初期对图标管理没有一个规范的解决方案。下面就和大家讲解一下基于 Iconfont 的图标管理方案。如果哪位大佬有更好的解决方案,可以一起探讨一下!

8778da4d67f8738025eae855aedbb6a6.png

Iconfont 是阿里巴巴出品的一个非常优秀的矢量图标库,里面有很多的图标,具体有多少呢,看它官网的计数器,反正一般开发工作中是够用了,相信很多做设计、前端开发的小伙伴都有在用这个网站!

0904088edde0b69c796ef9e8c5c1cb38.png

今天要说的就是它的图标管理功能,我们可以对喜欢的图标加入购物车,然后加入相应的项目中去。我们为每一个项目创建一个目录,这样当后期有图标需要添加进来时,直接加在对应项目中,然背后重新生成图标文件即可。

58682d07497e5b6570a6536fcaf8f881.png

然后在我的项目页面,可以对图标进行下载,管理,上传自定义图标等,非常方便。

4963bef09ed6a8c9077e8b83e6dd111d.png

并且可以邀请成员加入项目或分享项目给他人。

每一个Web 项目从项目开发初期做好图标管理,可以省去很多不必要的困扰。

dae1817b3d0f1ed07d8db232702bcb64.png

其他问题

图标对应格式的字体文件(例如 iconfont.woff2 )丢失,导致在安卓小程序上面图标不显示的解决方法:

找到一个能够显示的文件,比如 iconfont.ttf 然后使用下面网站进行格式转换,需要转换2步,先将 ttf 转换成 woff2 ,然后再将 ttf2 转换成 base64 。再写入到 css 中

网址:https://transfonter.org/

a62fb13804fd150c98b55eba767b6bd7.png

将转换后的 base64 码写入 css :

b48b72c96c2fae000fb960034e9441d5.png

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

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

相关文章

判断按键值_Pygame(九)按键事件(2)

Pygame(九)按键事件(2)前情提要前情提要作业解析完整代码# /usr/bin/python3# Author: 爱编程的章老师# Time: 2021/1/7 0007# E-mail: Bluesand2010163.comimport pygame, sys, timefrom random import randintdef homework():作业 挡板接球 一个宽100 ,高10的棕色挡板,…

动态添加input_前端提效必备:动态模版生成

前言在日常开发中,我们需要不停的新建页面和组件。以 Vue 项目为例,我们在新建一个页面的时候,需要经历一遍又一遍重复的过程:1、先新建一个文件夹2、然后新建一个 .vue 文件,写上 、", "" ],"…

在dom最前面插入_JavaScript中的DOM

1. 关于DOM文档对象模型(DocumentObject Model),是基于浏览器编程的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla(火狐)的浏览器最与标准接近。通过 DOM,可以访问所有的 HTML元素&#…

当代最值得收藏的画家作品_当代最具潜力和收藏价值的十大画家

原标题:当代最具潜力和收藏价值的十大画家当代从事绘画的人成千上万,哪些名家作品值得收藏?当前都有哪些“潜力股”,相关专家综合市场分析,纯从艺术水准上列出值得收藏的“潜力股”,供爱好书画收藏的各界人…

mysql union all 别名_mysql union和union all

如下先创建2个表,aa bb.CREATE table aa(uid int(20) not null,name VARCHAR(30) not null)engineinnodb default charsetutf8mb4 COLLATE utf8mb4_general_ci;INSERT INTO aa(uid, name) VALUES (10, 张芳);INSERT INTO aa(uid, name) VALUES (11, 王凯);INSERT IN…

ci框架 乱码 mysql_mysql容器乱码问题

在docker-compose.yml文件中定义mysql导入utf-8的万国码services:mysql:image:mysql:5.7# command: [--character-set-serverutf8mb4, --collation-serverutf8mb4_unicode_ci]volumes:-./data/docker/mysql:/var/lib/mysql-./mysql/:/docker-entrypoint-initdb.d/-./conf/mys…

mysql分表 查询 优化_MySQL性能管理及架构(查询优化、分库分表)一遍文章搞定...

相关配置参数:slow_query_log # 启动停止记录慢查日志,慢查询日志默认是没有开启的可以在配置文件中开启(on)slow_query_log_file # 指定慢查日志的存储路径及文件,日志存储和数据从存储应该分开存储long_query_time # 指定记录慢查询日志SQL…

mysql临时表 清空_在数据库中临时表什么时候会被清除呢

展开全部我们仍使用 实验 05 中的环境,略去准备数据的过程。我们仍然使用两个会话,62616964757a686964616fe59b9ee7ad9431333433646439一个会话 run,用于运行主 SQL;另一个会话 ps,用于进行 performance_schema 的观察…

python医学图像分割_基于cv2的医学图像分割

例如,图像如下所示:import cv2import numpy as npimg cv2.imread("mdb168.pgm",0)import matplotlib.pyplot as pltplt.imshow(img, cmap"gray")我想删除图像中所有的伪影和不必要的部分。在为此,我首先对图像进行二值化…

ubuntu下使用python将ppt转成图片_Ubuntu下使用Python实现游戏制作中的切分图片功能...

本文实例讲述了Ubuntu下使用Python实现游戏制作中的切分图片功能。分享给大家供大家参考,具体如下:why拿到一个人物行走的素材,要用TexturePacker打包。TexturePacker打包后,助于游戏加载图片效率,且比较好管理。目前得…

世上最简单的mysql_mysql这样学最简单|基本操作上

这是数据库系列的第一篇文章,主要是对mysql的基本操作有一个了解。本系列的教程会先从基础出发,逐步过渡到优化。一、前提在这里我们不会从如何去安装数据库开始讲起,而是在安装完之后从操作数据库开始,文中所有的代码均在我自己的…

zabbix4.0添加mysql报警_Zabbix4.0系统告警“Zabbix server is not running”

第一步: 查看系统日志,进一步确认原因1 cat /var/log/zabbix/zabbix_server.log问题出现在数据库。第二步 数据库确认1 mysql -u root -p #root用户登陆数据库如果登录不成功,就看一下登录密码是否正确以及zabbix用户是否有权限登录数据库。1…

影响索引的mysql函数_mysql索引对排序的影响实例分析

本文实例讲述了mysql索引对排序的影响。分享给大家供大家参考,具体如下:索引不仅能提高查询速度,还可以添加排序速度,如果order by 后面的语句用到了索引,那么将会提高排序的速度。测试1、创建测试表:t15表…

php如何对 mysql 中text类型拆分存入一个数组_PHP递归实现无限级分类,可选返回字符串和数组...

正 文:在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性。那么PHP是如何实现无限级分类的呢?我们在本文中使用递归算法并结合mysql数据表实现无限级分类。递归,简单的说就是一段程序代码的重复调…

python 开发框架 ant_Golang/python语言开发的分布式游戏服务器框架 mqant

软件介绍mqantmqant 是一款基于 Golang 语言的简洁,高效,高性能的分布式游戏服务器框架,研发的初衷是要实现一款能支持高并发,高性能,高实时性的游戏服务器框架,也希望 mqant 未来能够做即时通讯和物联网方…

java w3c xml_org.w3c.dom(java dom)解析XML文档

首先来了解点Java DOM 的 API:1.解析器工厂类:DocumentBuilderFactory创建的方法:DocumentBuilderFactory dbf DocumentBuilderFactory.newInstance();2.解析器:DocumentBuilder创建方法:通过解析器工厂类来获得 DocumentBuilder…

mysql migrations_Code First Migrations更新数据库结构(数据迁移)

背景 code first起初当修改model后,要持久化至数据库中时,总要把原数据库给删除掉再创建(DropCreateDatabaseIfModelChanges),此时就会产生一个问题,当我们的旧数据库中包含一些测试数据时,当持久化更新后,…

java 机器码 虚拟机_Java虚拟机:源码到机器码

无论什么语言写的代码,其到最后都是通过机器码运行的,无一例外。那么对于 Java 语言来说,其从源代码到机器码,这中间到底发生了什么呢?这就是今天我们要聊的。如下图所示,编译器可以分为:前端编…

docker 远程连接 文件看不到_开发提升十倍生产力: IDEA 远程一键部署 Spring Boot 到 Docker...

一、开发前准备二、新建项目《Java 2019 超神之路》《Dubbo 实现原理与源码解析 —— 精品合集》《Spring 实现原理与源码解析 —— 精品合集》《MyBatis 实现原理与源码解析 —— 精品合集》《Spring MVC 实现原理与源码解析 —— 精品合集》《Spring Boot 实现原理与源码解析…

java多台_Java 多态

Java中多态的特性,在学习中就是很难懂,比较抽象的概念。学的时候就犯糊涂,但日后会发现,基础在日常工作的理解中占有重要的角色。下面,我将用一个代码实例,回忆和巩固多态的概念和存在的意义。理解多态&…