icons-font-customization 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
icons-font-customization 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
icons-font-customization 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
icons-font-customization 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
icons-font-customization 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 CC0-1.0
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 uuware
适用人群 未知
收录时间 2020-10-29

软件简介

icons-font-customization 这个软件(或工具) 提供了超 33,000 个开箱即用的免费 svg 图标集合和生成自己图标字体的工具。收集的所有图标都适合于私人或商业项目,还可以把不同来源的图标打包成一个字体文件,甚至可以下载任何网址的 svg 文件并进行转换打包。

各个来源图标的相关许可证信息会被自动包含在生成的 css 文件中。请先打开这个链接 所有图标 确认下包含了哪些图标。在这个链接,可以更改图标颜色,背景色和大小。还可以根据关键字检索,保存图标是否选中的状态,或输出选中图标的列表字符串,用于下面介绍的生成自己的图标字体。

当前包含的图标集列表

使用方法1,下载或克隆您需要的项目到本地。

点击项目主页 home page 的 "Download ZIP" 并解压到本地合适的文件夹。
或者使用 git 命令克隆到本地:
git clone https://github.com/uuware/icons-font-command.git
不管使用哪种方式,您将在本地得到这个项目,然后 cd 到这个项目的根文件夹并运行下面的命令来生成字体。(注意,命令行中的 -- -- 是正确的):
npm run generate-font -- --config config-file-path
如果您在运行文件夹有一个叫 icons-font.config.js 的配置文件,那么可以省略配置文件路径:
npm run generate-font
 

使用方法2,使用 NPM 全局安装 icons-font-command (或 icons-font-customization)。

运行:
npm install -g icons-font-command
现在您可以在任何文件夹中运行命令(无论您安装的是哪个项目,该命令都是相同的,并注意命令中的 --):
icons-font-command --config config-file-path
如果您在运行文件夹有一个叫 icons-font.config.js 的配置文件,那么可以省略配置文件路径:
npm run generate-font
您还可以使用此命令在当前文件夹生成默认配置文件:
icons-font-command --copyconfig
 

使用方法3,在您的 Node.js 项目中安装。

如果想要在代码中自由的操作它,则根据您的需要,在项目的根文件夹中运行 npm i icons-font-command --save-dev 或 npm i icons-font-customization --save-dev 命令。
然后在代码中这样调用:

var IconsFontLite = require('icons-font-command');
IconsFontLite.cmd();

// Or pass parameters
var parameters = {'--config': 'config-file-path'};
var IconsFontLite = require('icons-font-command');
IconsFontLite.generateFont(parameters);

如果一切正常,你将在输出文件夹得到结果,打开 sample.html 确认结果或包含 icon-style.css 在您的html中。

兼容性

  • WOFF2:Chrome 36,Firefox 39,Opera 23,Safari 10,IE不支持,Edge 14
    WOFF File Format 2.0。WOFF2是下一代WOFF。WOFF2格式比原始WOFF提供30%的平均压缩增益。

  • WOFF:Chrome 5,Firefox 3.6,Opera 11.10,Safari 5.1,IE 9,Edge 12
    Web开放字体格式。WOFF基本上是所有主要浏览器都支持元数据和压缩的OTF或TTF。
    这是Mozilla基金会,Microsoft和Opera Software合作的结果。因为字体是压缩的,所以加载速度更快。

  • TTF:Chrome 4,Firefox 3.5,Opera 10,Safari 3.1,IE 9,Edge 12
    TrueType字体。所有主要的浏览器都支持此格式,但是TTF字体在IE 9和更高版本中才可用,仅当嵌入位设置为可安装时。

  • EOT:Chrome不支持,Firefox不支持,Opera不支持,Safari不支持,IE 6-11
    Embedded OpenType。这是使用@ font-face时IE8及更低版本唯一能识别的格式。

  • SVG字体:Chrome 4-37,Firefox不支持,Opera 10-24,Safari 3.2-14,IE / Edge不支持
    可缩放矢量图形字体。SVG字体始终是未压缩的,并且是iOS(iPhone,iPad)和Safari的4.1版及更低版本所允许的唯一字体。

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (2)

加载中
打分: 力荐
十分感谢!
2020/12/03 11:18
回复
举报
uuware软件作者
我自己做Web项目时,总是为找合适的图标花费不少时间。这次花了点时间做了这个图标集项目,希望能给开发帮点忙,能有人用。如有问题或改进,欢迎提出。
2020/10/29 16:54
回复
举报
更多评论
发表于大前端专区
2020/12/21 06:49

超3万 SVG图标大集合!开箱即用,添加桌面版本,可简单生成字体,PNG/JPG/ICO

3 万免费 svg 图标大集合!自由组合,开箱即用,版本升级,打开这个链接 所有图标 就可以确认包含的所有图标,也可以在线直接下载PNG,JPG和ICO图片! 桌面版本的开发已经完成。现在可以不用安装Node.JS,也不需要懂npm就可以直接下载程序,鼠标操作就可以批量生成字体,PNG/JPG/ICO图片文件。 可以进入项目icons-font-customization查看详细信息,或直接跳入icons-font-desktop项目,或直接进入下载页面程序下载。 Windows平台...

0
27
2020/12/09 05:16

超 3 万 svg 图标大集合!开箱即用,可在线下载 PNG、JPG,添加新图标 ThemeIsle icons

3 万免费 svg 图标大集合!自由组合,开箱即用,版本升级,打开这个链接 所有图标 就可在线直接下载PNG和JPG图片了!新添加了下载透明背景的PNG图片,也可以设置长度和宽度,满足特定的需求。新增加了100个干净清爽的ThemeIsle图标。 免安装的桌面版本正在开发中,不久将会提供。 不管做网站开发或手机开发,或桌面程序开发,拥有一套漂亮的图标是必不可少的。合适的图标也能给软件增色不少。icons-font-customization这个Node....

8
32
2020/12/03 09:50

3 万免费 svg 图标大集合!自由组合,开箱即用,可在线下载 PNG 和 JPG 图片!发布 1.1

3 万免费 svg 图标大集合!自由组合,开箱即用,版本升级,打开这个链接 所有图标 就可在线直接下载PNG和JPG图片了!免安装的桌面版本正在开发中,不久将会提供。 不管做网站开发或手机开发,或桌面程序开发,拥有一套漂亮的图标是必不可少的。合适的图标也能给软件增色不少。icons-font-customization这个Node.js软件(或工具)提供了超33,000个开箱即用的免费 svg 图标集合和生成自己图标字体的工具。所有图标都适合于私人或商...

4
62
2020/10/30 04:59

3 万免费 svg 图标大集合!可自由组合生成各种字体和 CSS,开箱即用!发布 1.0

不管做网站开发或手机开发,或桌面程序开发,拥有一套漂亮的图标是必不可少的。合适的图标也能给软件增色不少。 提供免费图标或字体的,Font Awesome是其中比较有名的一家。Bootstrap Icons和Material Design icons by Google,还有其他的也很受欢迎。也有些网站提供了图标的下载,包括免费或不免费的,像Iconfinder,Icons8,freeicons等。对开发者来说,很多时候只会利用其中非常小的一部分。有时候可能还需要多家图标的组合。...

4
41
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于开发技能专区
2014/04/29 18:22

JAX-WS Customization

介绍 在之前的文章中,有一篇关于HandlerChain的介绍。当时HandlerChain使用的是Java Annotation方式注册到WebService上的。我们也可以使用JAX-WS提供的针对WSDL的customization,来配置HandlerChain。JAX-WS的规范中,定义了针对WSDL的customization,可以对以下内容进行定制: Package name Wrapper style Asynchrony Provider interface Class Java method Java parameter Java doc XML schema Handler chain 这些customiza...

0
2
发表于AI & 大数据专区
2020/04/18 23:01

font

https://fontmeme.com/fonts/eb-garamond-font/ sabon. Minion font Italia.

0
0
发表了博客
2018/03/07 17:39

font property font-family does not have generic default?

在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列(generic family name) - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace") 特定字体系列(font family name) - 具体的字体系列(比如 "Times" 或 "Courier") 除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列: Serif 字体 Sans-serif 字体 Monospace 字体 Cursive 字体 Fantasy 字体 font property font-family does not have generic default ...

0
0
发表了博客
2012/10/04 08:43

<meta name="google-translate-customization" con...

<div id="google_translate_element"></div><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'zh-CN', autoDisplay: false}, 'google_translate_element'); } </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>...

0
0
发表了博客
2020/09/13 07:18

Google的Material Icons

由于被Q了,截图备查

0
0
发表了博客
2018/01/31 14:11

font使用

font连写属性 font-style font-variant font-weight font-size/line-height font-family font-size与font-family为必填 font-style 可指定的值为: normal(正常) italic(斜体) oblique(倾斜) inherit(继承父元素) font-variant值:normal(正常) small-caps(所有字母大写&字号缩小) inherit(继承父元素) 常用写法: div { font: 14px/60px "微软雅黑",sans-serif; } css3引入了@font-face规则,可指定服务器...

0
0
发表了博客
2020/03/14 10:19

A set of icons for Inkscape 0.91

https://inkscape.org/en/~BobSongs/%E2%98%85iconssvg wget https://media.inkscape.org/media/resources/file/icons.svg cp icons.svg /usr/share/inkscape/icons/ then open icons.svg by inkscape /usr/share/inkscape/symbols/ A set of icons for Inkscape 0.91 as a temporary place-holder until Inkscape 0.91.1 is released. The icons have a familiar feel to Inkscape 0.48.x. To test: 1. using the file managem...

0
0
发表了博客
2019/10/17 19:19

css字体相关(font-face, font-family)

记录一下近期接触的有关字体的一些经验 一、font-family 平时我们使用css设定字体的话都是使用font-family,如下: html,body { height: 100%; margin: 0; font-family:"Microsoft YaHei",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 12px; overflow: hidden; cursor: default; } font-fam...

0
0
发表了博客
2015/04/16 14:08

Font For Web

Lato Helvetica Neue Helvetica Arial sans-serif

0
0
发表了博客
2013/01/27 10:58

Font Replacer

自从iOS3.2以来,Apple允许我们在自己的app中使用自定义的字体。但是这一过程并不简单,因为我们不能在 Interface Builder (NIB)文件中之间给控件使用我们自己的字体。如果你使用NIB来制作UI,有很多控件需要定义各种自己的字体,这一过程十分麻烦,你必须要在程序里逐个写代码使用自定义字体。FontReplacer很好地解决了这个问题,至少比之前简便很多。使用FontReplacer方法如下:比如你在NIB中设置某个UILable的字体是Arial...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
2 评论
36 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部