icon-font-generator 的使用

時間 2019-11-08

標籤 icon font generator 使用简体版

原文原文鏈接

像素完美（Pixel Perfection）、分辨率無關（Resolution Independent）和多平臺體驗一致性是設計師們的追求。可訪問性（Accessability）、加載性能和重構靈活性是前端工程師們關心的主題。css

因爲在互聯網上沒有找到該命令的博文，因此在此記錄一下使用過程和踩坑記錄。html

準備工做

首先，進入npm官方網站，找到icon-font-generator的使用介紹 www.npmjs.com/package/ico…

接着往下翻，找到該命令的實例和使用命令。

打開git命令下載icon-font-generator前端

準備工做大體已經完成，咱們如今去阿里巴巴矢量圖標圖下載幾張svg圖片存放到文件夾下，而後執行腳本，git

咱們在icon_dist就能夠看到生成的文件

打開icon.html，咱們就能夠預覽能夠使用的圖標npm

使用

最簡單的使用流程是：json

將icon.css引入到index.html中
css中輸入 "icon icon-文件名"

<!DOCTYPE html>
<html>
<head>
	<title>測試內容</title>
	<link rel="stylesheet" type="text/css" href="./icon_dist/icons.css">
</head>
<body>
	<i class="icon icon-send"></i>
</body>
</html>
複製代碼

在瀏覽器中打開index.html：瀏覽器

踩坑記錄：bash

svg圖片必須是1024*1024的,有兩種方式能夠實現前端工程師

1>要麼是下載的時候直接更改大小svg

2> 代碼層面更改就是直接更改svg的代碼爲1024

若是執行package.json中的腳本時,提示命令找不到。那麼此時跟操做系統有關係。由於在不一樣的操做系統中指定的是物理路徑。
每次添加一個svg時，都必須從新執行一遍命令
若是svg圖片不是1024，那麼編譯後的css會錯亂

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。