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.pswp.cn/news/534269.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/534269.shtml
英文地址,請注明出處:http://en.pswp.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元素&#…

python 快速刪除程序_如何快速一次性卸載所有python包(第三方庫)呢

很多時候我們都會有一個麻煩事,就是打開pycharm或者VScode等的時候,都有可能因為自己電腦上面安裝的第三方模塊過多,導致電腦很卡,風扇轉速不停地增加,這時候我們就會想去卸載一些不太用得著的第三方模塊,但…

python正則表達式修飾符_Python正則表達式

正則表達式是一個特殊的字符序列,它能幫助你方便的檢查一個字符串是否與某種模式匹配。re 模塊使 Python 語言擁有全部的正則表達式功能。compile 函數根據一個模式字符串和可選的標志參數生成一個正則表達式對象。該對象擁有一系列方法用于正則表達式匹配和替換。r…

當代最值得收藏的畫家作品_當代最具潛力和收藏價值的十大畫家

原標題:當代最具潛力和收藏價值的十大畫家當代從事繪畫的人成千上萬,哪些名家作品值得收藏?當前都有哪些“潛力股”,相關專家綜合市場分析,純從藝術水準上列出值得收藏的“潛力股”,供愛好書畫收藏的各界人…

備抵附加賬戶的期末余額_會計賬戶的分類(二)

待攤費用賬戶的格式和運用方法同盤存類賬戶,即:期初如果有余額在借方,本期發生額的增加數在借方,本期發生額的減少數在貸方,期末如果有余額在借方。預提費用賬戶是指用來核算和監督按規定預先提取計入當期,…

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…

MySQL不走聯合索引_mysql group by 多列優化思路?為什么不走聯合索引?

explain SELECT a, b, COUNT(*) FROM tbnameGROUP BY a, border by a DESClimit 1a 和 b 列已經設置聯合索引, 為什么這種操作也會執行全表掃描呢?explain SELECT a, b FROM tbnameGROUP BY a, border by a DESC去掉 COUNT 和 limit 則走索引沒有掃描&am…

mysql ddl 鎖_MySQL Online DDL導致全局鎖表案例分析

MySQL Online DDL導致全局鎖表案例分析我這邊遇到了什么問題?線上給某個表執行新增索引SQL, 然后整個數據CPU打到100%, 連接數暴增到極限, 最后導致所有訪問數據庫的應用都奔潰.SQL如下:ALTER TABLE bookADD INDEX idx_sub_title (sub_title ASC);能看到什么?10063293, root,…

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…

dokcer mysql修改編碼_默認支持utf8編碼的mysql docker鏡像

其他人都是不正確的使用mysql容器鏡像可以很快速的運行mysql,免去了傳統的虛擬機安裝方式的繁瑣配置。但是使用官方的mysql鏡像,你會遇到中文亂碼的問題,原因是官方鏡像的字符集默認值不是utf8。這時候你去google,會找到一些文章&…

mysql臨時表 清空_在數據庫中臨時表什么時候會被清除呢

展開全部我們仍使用 實驗 05 中的環境,略去準備數據的過程。我們仍然使用兩個會話,62616964757a686964616fe59b9ee7ad9431333433646439一個會話 run,用于運行主 SQL;另一個會話 ps,用于進行 performance_schema 的觀察…

locust mysql_locust性能壓測連接mysql,隨機取出班級,綁定學生

from locust import HttpLocust, TaskSet, taskimport pymysqlimport randomclass UserBehavior(TaskSet):def on_start(self):db pymysql.connect("ip地址", "用戶名", "密碼", "數據庫")cursor db.cursor()cursor.execute("S…

mysql無法添加或更新子行_違反完整性約束:1452無法添加或更新子行:

我試圖在我的注釋表中插入值,但出現錯誤。俗話說,我不能添加或更新子行,我也不知道這意味著什么。我的架構看起來像這樣-- ------------------------------ Table structure for comments-- ----------------------------DROP TABLE IF EXIST…

python醫學圖像分割_基于cv2的醫學圖像分割

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

python解析response的json_從HTML responseTex解析JSON

因此,我大體上同意,更好的解決方案是確保服務器只返回JSON,不過這是通過客戶端Javascript實現的一種快速方法,如Barmer所建議的那樣,將html解析到DOM,獲取body中的文本childNode并在其上運行JSONParse。在v…

mysql 密碼修改時間_Mysql修改密碼的方法

修改mysql密碼的方法:最簡單的,在Navicat連接后點用戶,找到rootlocalhost直接修改。注意如果裝了xampp,在phpmyadmin配置文件也需要改兩處密碼。下面是在命令行修改的方法。方法1:用mysqladmin----------------親測這個…

svn版本庫瀏覽器_在SVN版本庫瀏覽器中直接編輯文件保存后不會彈..._網絡編輯_幫考網...

原因是沒有實際添加到版本庫中,要添加到版本庫必須執行“Commit”。具體分析如下:SVN錯誤處理svn : Couldn’t perform atomic initialization. 臨時解決辦法:升級sqlite。原本安裝的是 subversion 1.6.16 sqlite 3.6.13,一直報”…