今天将和大家介绍一套经常出现在企业网站、博客的字体图标。这套icon使用了一些圆角效果,使得图标看起来很可爱漂亮,你可以用这个图标放在你的企业网站或是后台类的界面,由于是图标字体,所以你可以随意更改它的颜色、大小,在Retina上浏览也会很清晰。

下图是作者为图标的配色,看起来很漂亮是吧?

310icons
该图标一共有310个,包含箭头、标志、工具图标等常用的,下图为外描边图标。

310-outline

 

纯色图标

310-single-color-icon

 

该图标下载后已经包含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替换为要调用的图标对应的代码即可。

标格式:字体图标(TTF,WOFF,EOT)、SVG、PNG。版权:商业及免费个人使用,详情请看下载包的mit_license.txt文档。

图标下载(566KB):微盘下载 | Download (国外原下载页)

Last modification:June 25, 2021
如果解决了你的困扰, 赏杯咖啡吧!
正文字体: 苍耳字库(屏幕显示字体)·苍耳今楷