icon-font-generator 的使用

像素完美（Pixel Perfection）、分辨率无关（Resolution Independent）和多平台体验一致性是设计师们的追求。可访问性（Accessability）、加载性能和重构灵活性是前端工程师们关心的主题。

由于在互联网上没有找到该命令的博文，所以在此记录一下使用过程和踩坑记录。

准备工作

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

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

打开git命令下载icon-font-generator

准备工作大致已经完成，我们现在去阿里巴巴矢量图标图下载几张svg图片存放到文件夹下，然后执行脚本，

我们在icon_dist就可以看到生成的文件

打开icon.html，我们就可以预览可以使用的图标

使用

最简单的使用流程是：

将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：

踩坑记录：

svg图片必须是1024*1024的,有两种方式可以实现

1>要么是下载的时候直接更改大小

2> 代码层面更改就是直接更改svg的代码为1024

如果执行package.json中的脚本时,提示命令找不到。那么此时跟操作系统有关系。因为在不同的操作系统中指定的是物理路径。
每次添加一个svg时，都必须重新执行一遍命令
如果svg图片不是1024，那么编译后的css会错乱

icon-font-generator 的使用相关推荐

html页面调用ico图标,如何在HTML中使用图标字体 - icon font?
日期:2012-8-27 来源:GBin1.com 在线演示本地下载主要特性使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小自由的修改颜色添加阴影 ...
免费的位图字体制作工具Bitmap Font Generator使用教程
转载请保留原地址 http://www.cocos2dres.com/post/87.html 谢谢!! 首先下载安装windows下免费的位图字体制作工具Bitmap Font Generator ...
解决firefox和IE9对icon font字体的跨域访问问题
解决firefox和IE9对icon font字体的跨域访问问题参考文章: (1)解决firefox和IE9对icon font字体的跨域访问问题 (2)https://www.cnblogs.co ...
Icon Font的转换
Icon Font是用于网页的纯色图标,这里引用一张网络图片: 由于体积小,易维护等特点,IconFont应用非常广泛. 这里推荐一个转换器,通过Upload一个后缀ttf的字体文件,可以反解出文件下 ...
java后台icon font 图标替换
我们知道后台有些菜单图标,一般用的是iconf font,往往免费的一套icon font系统里的图标太少,满足不了我们一些需求,当然也有人说用重复的图标不就可以了,可是作为一个资深程序员,强烈病态的 ...
【游戏开发实战】可爱的动物数字，教你在Unity中自制UGUI艺术字体（位图字体）（Bitmap Font Generator）
文章目录一.前言二.最终效果三.Bitmap Font Generator制作字体 1.准备字体图片 2.下载Bitmap Font Generator 3.bmfont64.exe导入图片 4 ...
vue3项目中引入icon font图标使用
vue3项目中如何引入icon font图标使用 1.从iconfont官网下载图标库文件放到项目中得到压缩包解压放到项目中,一般都放到assets文件夹下 2.在main.ts文件中引入图标文件 ...
cocos2d-x位图字体生成工具Bitmap Font Generator的使用（内含命令行）
欢迎转载,本帖地址:http://blog.csdn.net/jinjian2009/article/details/9371691 刚才发完贴发现,图全没了,原来自己直接贴的,没有上传,现在补全了~ ...
在iOS中使用icon font
在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与Retina屏的设备,苹果要求每个背景图都要以两种尺寸存(a.png和a@2 ...
icon font大搜罗
免费字体下面的这些icon font都是免费或者开源的,你可以大胆的使用,但是作为设计师,大家要有点儿修养,在使用前先看看相关字体文件的版权授权方式-- Font Awesome(150+个) 为配 ...

icon-font-generator 的使用

准备工作

使用

icon-font-generator 的使用相关推荐

最新文章

热门文章