字体图标(字体图标设计)

字体图标(字体图标设计)p 在网页设计中使用图标字体 icon font 是件挺有新意的事情 使用图标字体能我们带来了一定的方便 比如在移动设备 Retina 屏幕效果展示 兼容 IE6 7 浏览器以及能任意将图标放大缩小等 这些都是很不错的 下面为大家简单介绍下利用 icomoon 来实现网页字体和分享 strong 30 个免费网页图标字体 strong p

大家好,我是讯享网,很高兴认识大家。



<p>在网页设计中使用图标字体(icon font)是件挺有新意的事情,使用图标字体能我们带来了一定的方便,比如在移动设备、Retina屏幕效果展示、兼容IE6/7浏览器以及能任意将图标放大缩小等,这些都是很不错的。下面为大家简单介绍下利用icomoon来实现网页字体和分享<strong>30个免费网页图标字体</strong>。</p> 

讯享网

使用icomoon定制网页字体
讯享网

流行的在线字体定制网站有Fontello和icomoon,这两个在线工具都很不错的,内置的图标也非常的多,当然在我今天分享的文章中的图标字体更多更实用更好哦^.^ 接下来我主要讲讲icoMoon的字体定制方法:

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

select-your-icon

下载完字体后,把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=https://www.shejidaren.com/"#"><span data-icon="?" aria-hidden="true"></span>帮助</a> 

2.使用Class类

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

也许有些同学喜欢自己原创,当然也是可以滴,准备工具:Fontlab、Adobe Illustrator。

Tips: Fontlab和AI这两个工具的路径是可以相互复制的哦,所以我们用AI来制作ICON方便一些,制作完再复制到Fontlab上,需要注意的是在AI里面的路径画大一点再复制到Fontlab里,否则容易变形。

让网页图标字体兼容IE6/7的浏览器

下载的压缩包有一个lte-ie7.js文件,内嵌至网页内即可。

[code]
<!–[if lte IE 7]><script src=https://www.shejidaren.com/"lte-ie7.js"></script><![endif]–>
[/code]

接下来一起看看免费开源的图标字体,各种各样的像素图标,我想一定有你需要的。

设计达人 - 网页图标字体以及使用教程

图标数量: 271
版权: SIL – Open Font Licence

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 120
版权: MIT Licence

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量:
版权: SIL Open Font License

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 140
版权: MIT Open Source License

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 266
版权: Free for personal or commercial projects

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 300+
版权: Free for personal or commercial projects

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 450
版权: CC License 3.0

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 171
版权: Creative Commons Share Alike 3.0

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 250+
版权: SIL Open Font License

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 250
版权: Creative Commons Share Alike 3.0

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 54
版权: SIL Open Font License (OFL)

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 120
版权: Free for personal or commercial projects

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 333

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 91

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 73
版权: BSD License

Maki →

设计达人 - 网页图标字体以及使用教程

图标数量: 80+
版权: Free for personal or commercial use

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 80
版权: Free for personal or commercial use

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 30
版权: Creative Commons Share Alike 3.0

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 88
版权: Free for personal or commercial use

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 89
版权: Open Font License (OFL)

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 60
版权: SIL Open Font License (OFL)

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 92
版权: SIL Open Font License (OFL)

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 21

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 78
版权: SIL Open Font License (OFL)

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 93
版权: Free for personal use

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 74
版权: Free for personal or commercial projects.

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 40
版权: Creative Commons Attribution-ShareAlike 3.0

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 30

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 30
版权: Free for personal or commercial projects

查看&下载字体 →

设计达人 - 网页图标字体以及使用教程

图标数量: 40
版权: Free for personal or commercial projects

查看&下载字体 →

图标整理自:http://speckyboy.com/2013/02/20/free-icon-font-sets/


小讯
上一篇 2025-04-21 13:31
下一篇 2025-05-23 14:52

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/151294.html