fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

ionicons
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://ionic.io/ionicons
GitHub:https://github.com/ionic-team/ionicons
网站描述:为 Ionic 定制的优质的 web 字体图标库

为 Ionic 定制的优质的 web 字体图标库。 

提示:所有品牌的图标是其各自所有者的商标。这些商标的使用并不表明商标持有人的转移,反之亦然。 

访问 ionicons.com 体验搜索功能,具有图标类名和样式关键词的识别。比如,如果你搜索 "arrow",你将会得到所有可用作箭头的图标。

除此之外,我们还包含了每个图标的样式名,以便于你在开发中复制和粘贴! 我们希望的是在 Ionic 中使用这个字体包,但是并没有限制使用的意思。

你可以在任何你觉得合适的地方使用它,个人或商业都行。Ionicons 是免费使用的,在 MIT 进行许可。

开始

  1. 下载并解压字体包
  2. 将 ionicons.css 拷贝到你的项目中
  3. 将 fonts 文件夹拷贝到你的项目中
  4. 确保 ionicons.css 中的字体文件的链接地址是正确指向 fonts 文件的路径的。
  5. 在每一个你需要用到的 web 页面中引入 ionicons.css 文件。

或者通过 component 安装:

$ component install driftyco/ionicons

或者通过 bower 安装?

$ bower install ionicons

html 例子

你可以在 ionicons.com 很轻易地找到你想要的图标,一旦你复制了所需图标的 CSS 类名,只需简单地将 icon 和图标类名(例如 icon-home)添加到一个 HTML 元素中。

<i></i>

构建指令

该库已经将所有文件构建好,随时可以使用。但也可以从源代码构建,这需要用到 Python, FontForge 和 Sass:

1) 安装 FontForge(一个从 SVG 文件创建字体的项目):

$ brew install fontforge ttfautohint

2) 安装 Sass

$ gem install sass

3) 按照自己的需求从 src/ 文件夹中添加或删减文件。

4) 修改 builder/manifest.json 文件中的设置,你可以修改 font-family 的名字和 CSS 类名前缀。

5) 运行构建命令:

python ./builder/generate.py

链接: https://fly63.com/nav/67

more>>
相关栏目
IconBrew
国外免费开源的图标库
官网
Twemoji
witter团队提供的强大表情符号库
官网GitHub
octicons
GitHub发布的一组开发原始码的免费素材图标
官网GitHub
feather icons
免费开源的简单而美丽的ICON图标集合
官网GitHub
BlendIcons
免费世界顶级图标库
官网
寻图标
功能强大图标内容丰富的icon图标库
官网
lordicon
令人难忘的动画图标素材
官网
favico.js
一款网页图标插件,让网页图标动起来
官网GitHub
Iconhunt
一个图标搜索引擎
官网
Picography
国外高分辨率和免费图片素材高分辨率来源之一
官网
ikonate
完全可定制的矢量图标
官网GitHub
shields
有各种各样的小图标,以及很多自定义的方案
官网GitHub
Share Icon
免费矢量素材图库
官网
iconninja
近百万免费图标素材的搜索引擎
官网
iconstore
一个设计感比较强的图标网站
官网
WallHere
一个著名的高清壁纸下载网站
官网

手机预览