IcoMoon图标字体的使用

What is IcoMoon?

   IcoMoon is an icon solution, providing three main services: Vector Icon Packs, The IcoMoon App, and hosting icons as SVGs or fonts.

下面进行说明一下简单地使用方法

1、进入网址:主页面

进入到网站首页:
https://icomoon.io/#home

IcoMoon图标字体的使用_第1张图片

点击右上角icoMoon app按钮,进行按钮的选择,然后进入到如下界面:

IcoMoon图标字体的使用_第2张图片

点击import Icons按钮后,进行svg图片的添加,就会出现如下界面,下面前面四个图标就是我新添加的,之后点击右下角的Generate Font 按钮,出现如下界面

IcoMoon图标字体的使用_第3张图片

然后点击download按钮进行下载,下载之后就可以在代码中使用了

IcoMoon图标字体的使用_第4张图片


下载后的文件格式如下所示:



运用:将fonts文件夹全部内容和style.css文件放到相应的项目中。


根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。

当然添加字体还需要设置font-size,也可以根据实际情况设置color改变其颜色。




转载自:http://blog.csdn.Net/goodgirl1991/article/details/50416974

icomoon图标是一个超赞超实用的开源图标系列,其图标官网地址为https://icomoon.io/icons.html

好,接下来介绍如何将该系列图标应用在web页面。

下载选定icomoon图标


点击IcoMoon App,进入页面后,选择想要引入web页面的图标,并且点击edit按钮后分别点击选择的图标进行编辑
编辑结束后,点击generate font按钮
点击download下载字体样式文件并从getCOde处可以获得图标的html转义码

web代码的编写

首先当然是需要将自定义字体样式引入web页面
[css] view plain copy
  1. @font-face{  
  2.         font-family:'icomoon';  
  3.         src:url('icomoon.eot');  
  4.         src:url('font/icomoon.eot?#iefix'format('embedded-opentype'),  
  5.             url('font/icomoon.woff'format('woff'),  
  6.             url('font/icomoon.ttf')  format('truetype'),    
  7.             url('font/icomoon.svg#SofiaProLight')  format('svg');  
  8.             font-weight:normal;  
  9.             font-style:normal;  
  10.      
  11.         }  
然后编写html代码,并描述指定标签的css样式,向该标签中添加icomoon图标。
[html] view plain copy
  1. <body>  
  2.     <div data-icon="">div>  
  3.     <div data-icon="">div>  
  4. body>  


[css] view plain copy
  1. div:after{  
  2.     font-family:'icomoon';  
  3.      contentattr(data-icon);  
  4.   
  5.     }  
通过以上步骤,图标得以显示


你可能感兴趣的:(前端工具)