超全的免费图标字体(在线图标字体制作)
书法字体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