一流高职院校建设网站/网页设计首页

超全的免费图标字体(在线图标字体制作)

书法字体2015.04.17图标字体

对于图标字体，网页设计师以及UI设计师应该都不会陌生。什么是图标字体？图标字体也称之为符号字体，是一种包含符号和字形(如箭头、文件夹、放大镜等)的字体文件，通常被认定为网站用户界面设计专用字形。图标字体就像其他网站字体一样，以设计排版规则在网站浏览器上显示的图标。使用图标字体能我们带来很多方便，比如在移动设备、Retina屏幕效果展示…

对于图标字体，网页设计师以及UI设计师应该都不会陌生。什么是图标字体？图标字体也称之为符号字体，是一种包含符号和字形(如箭头、文件夹、放大镜等)的字体文件，通常被认定为网站用户界面设计专用字形。图标字体就像其他网站字体一样，以设计排版规则在网站浏览器上显示的图标。使用图标字体能我们带来很多方便，比如在移动设备、Retina屏幕效果展示、兼容IE6/7浏览器以及能任意将图标放大缩小等，这些都是很不错的。今天给大家分享一组超全的免费图标字体，这些免费图标字体可以完美的运用在你的界面设计中，可以让你更快捷的设计出更精彩的界面。

现在不少网站一般都采用图片图标来给一些按钮、标签、菜单、标题前添加一些好看对应的图标，这样可以让网页显得美观活泼，但美化的同时需要载入图标图片，这会影响网站的速度。而为网站使用图标字体来显示那些美化的图标就不会有太大的影响。

为网页添加字体图标，有很多好处，比如说：替代了原来的图片图标，缩减了文件大小。

引用图片次数减少，减少了http请求，提高了网页速度。

可以用css自由改变图标颜色，大小等属性，很方便。

缩放屏幕的话，图标还是依旧清晰。

有很大的跨浏览器支持(即使IE6，也能支持这种规则)

在用户调整他们的网页浏览器设置的时候可以自动缩放

能体现字体和文本有关的属性(如文本阴影与梯度)

让我们一起来分享这些的免费的图标字体吧。

IcoMoon，在线制作图标字体网站。

icoMoon的字体定制方法：

打开icoMoon APP字体定制页面，然后你会看到几百个常用图标，这里不建议全选，选几个你需要的就可以了，然后点击底部的“Generate Font”按钮 –> 点击“Download”即可下载字体。

图标字体使用方法

下载完字体后，把Demo文件里面的style.css文件内容复制至你的CSS文件上。@font-face {

font-family: 'shejidaren';

src:url('fonts/shejidaren.eot');

src:url('fonts/shejidaren.eot?#iefix') format('embedded-opentype'),

url('fonts/shejidaren.woff') format('woff'),

url('fonts/shejidaren.ttf') format('truetype'),

url('fonts/shejidaren.svg#shejidaren') format('svg');

font-weight: normal;

font-style: normal;

}

...省略了啦

HTML代码，有两个调用方法，而且两个都很简单：

1.使用data-icon=”?”,这个是HTML5的属性哦~~帮助

2.使用Class类

Fontello在线制作图标字体网站，内置了大量图标资源。

阿里妈妈MUX推出的在线图标字体制作平台：iconfont