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会错乱