亿品元素设计资源博客

品味经典包装设计,版式设计,分享最新CDR设计软件教程下载及在线书法字体生成!
登录注册 广告合作 投稿

亿品元素 » 实用字体 » 超全的免费图标字体下载(在线图标字体制作)
超全的免费图标字体下载(在线图标字体制作)

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

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

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

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

图标字体

为网页添加字体图标,有很多好处,比如说:

  • 替代了原来的图片图标,缩减了文件大小。
  • 引用图片次数减少,减少了http请求,提高了网页速度。
  • 可以用css自由改变图标颜色,大小等属性,很方便。
  • 缩放屏幕的话,图标还是依旧清晰。
  • 有很大的跨浏览器支持(即使IE6,也能支持这种规则)
  • 在用户调整他们的网页浏览器设置的时候可以自动缩放
  • 能体现字体和文本有关的属性(如文本阴影与梯度)

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

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

8

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的属性哦~~

<a href="#" rel="nofollow" ><span data-icon="?" aria-hidden="true"></span>帮助</a>

2.使用Class类

<span aria-hidden="true" class="icon-help"></span>

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

图标字体

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

图标字体

Font Awesome

4

Sosa icon font

3

Iconic Icon Set

5

打赏

如果本站对您有所帮助,请考虑对本站进行小额捐赠:

捐赠亿品
相关内容

发表评论 【登录·注册】

所有留言都会被审核,请勿发布垃圾评论!

(必填)*

CorelDraw插件魔镜介绍 关闭
CorelDraw插件魔镜购买关闭