今天将和大家介绍一套经常出现在企业网站、博客的字体图标。这套icon使用了一些圆角效果，使得图标看起来很可爱漂亮，你可以用这个图标放在你的企业网站或是后台类的界面，由于是图标字体，所以你可以随意更改它的颜色、大小，在Retina上浏览也会很清晰。
下图是作者为图标的配色，看起来很漂亮是吧？
该图标一共有310个，包含箭头、标志、工具图标等常用的，下图为外描边图标。
纯色图标
该图标下载后已经包含HTML和CSS文件，可以直接使用了，很方便。
本文转自：http://www.shejidaren.com/elegant-icon-font.html
使用方法
png等图片的使用方法就不多说了，下面说说css字体的使用方法。
对于打算长期使用这套图标的站长来说，一般都会用css嵌入字体的方法来调用。好处就是要那个图标就增加那个字符的代码即可，不需要像调用图片图标那么麻烦，要PS也要定位，累啊。
在全站的style里面加入如下css代码；
@font-face {
font-family: 'ElegantIcons';
src:url('fonts/ElegantIcons.eot');
src:url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
url('fonts/ElegantIcons.woff') format('woff'),
url('fonts/ElegantIcons.ttf') format('truetype'),
url('fonts/ElegantIcons.svg#ElegantIcons') format('svg');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'ElegantIcons';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
在需要使用图标的地方调用；
说明：不一定要用span，只是JiaJieChan觉得span就是轻盈的，代表一些小图标小标签的，纯属个人偏好。将代码里的data-icon替换为要调用的图标对应的代码即可。