现在的位置: 首页 > 网络采风 > 正文

IcoMoon:提供免费矢量图标字体下载及在线生成服务

2014年08月20日 网络采风 ⁄ 共 1153字 ⁄ 字号 暂无评论 ⁄ 阅读 439 次

IcoMoon简介:IcoMoon提供矢量格式图标字体解决方案,主要有三种服务:矢量图标包、IcoMoon应用程序和字体托管。IcoMoon的图标包分为开源和付费两个版本,其中免费版包含450个图标,可任意下载使用。所有IcoMoon的免费图标都可任意缩放,包括三种不同的矢量格式:SVG,AI和PDF格式。所有SVG图像包括16×16设计网格,编辑图标非常方便,可以在几乎任何矢量编辑软件中打开SVG图像。如果您要访问所有的图标在一个文件中,可以使用PSD格式。

icomoon图标字体下载

提供图标字体在线生成的网站还有:

Fontello:图标字体在线生成器,提供免费图标字库下载

Fontastic:在线创建自己的图标字体,免费享用图标字体云服务

IcoMoon应用:IcoMoon的HTML5应用程序允许您快速浏览和搜索您需要的图标,还可导入自己的图标在线编辑或生成需要的icon字体并下载使用。

IcoMoon应用网址:https://icomoon.io/app

1、IcoMoon的应用程序界面,允许导入自己的SVG图像或SVG字体。

IcoMoon应用界面

2、可同时选择多个图标字体一起下载(CSS Sprites技术处理的PNG格式),并可设定颜色、大小等。

SVG图标字体下载

3、可对图标字体进行在线编辑并下载使用(SVG格式),虽不如专业软件强大,但基本够用。

icomoon图标字体在线编辑

4、可生成需要的icon字体(支持EOT,SVG,WOFF,TTF格式)并提供下载,包含html演示及css文件。

在线生成ico字体

5、如果想要兼容IE7以下浏览器,请在设置里勾选Support IE7(and older)选项,会生成一个单独JS、CSS文件。

设置兼容IE7以下浏览器

6、如果图标字体不够用,可以在IcoMoon图标库中导入。

icomoon的图标字体库

使用IcoMoon生成的图标字体:通过IcoMoon应用,我们已经生成了自己需要的icon字体。那么,如何在网站中使用这些字体图标呢?请往下看。

1、下载字体压缩包,解压后得到下图所示文件。将fonts文件夹复制到网站中并为项目添加字体,接着从style.css文件中复制CSS样式,并粘贴到网站的CSS文件中或单独存成一个样式文件。

icomoon压缩包文件图示

2、完成上述步骤后,在CSS文件中找到@font-face,将URL路径修改成本地的相对路径。

找到@font-face,修改URL路径

3、字体和路径设置完成后,在HTML页面只需调用相对应的class即可,可以参考压缩包中的demo.html文件。如果想兼容IE7浏览器,需引用IE7目录的js。如:

调用class:

  1. <span class="icon icon-add"></span>

调用js:

  1. <script src="ie7/ie7.js"></script>

 

IcoMoon图标下载:https://github.com/Keyamoon/IcoMoon--limited-/archive/master.zip

给我留言

留言无头像?


×