admin管理员组文章数量:1594753
对于图标字体,网页设计师以及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的属性哦~~
<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
Sosa icon font
Iconic Icon Set
Raphaël Icon-Set
PulsarJS @FontFace
Foundation Icons Fonts
Typicons
Entypo
Heydings Icons
Heydings Controls (App Icon Font)
JustVector Social Icons Font
Modern Pictograms
Brandico
Signify Lite
Web Symbols typeface
Social Media Icons
ikoo
Dashicons – The Official WordPress Admin Icon Font (197 Icons)
Dashicons Download Page →
Stroke 7 – An iOS7 Inspired Thin Stroke Icon Font (170 Icons)
Stroke 7 Download Page →
The Elegant Icon Font (360 Icons)
Elegant Icon Font Download Page →
Dripicons – A Completely Free, Vector Line-Icon Font (95 Icons)
Dripicons Download Page →
Metrize Icons – A Metro-Style Icon Font (300 Icons)
Metrize Download Page →
Icon Pack – A Line-Styled Icon Font from Petras Nargela (40 Icons)
Line-Styled Icon Pack Download Page →
Genericons – An Icon Font from WordPress (123 Icons)
Genericons Download Page →
Open Iconic – A Highly Legible Icon Font (218 Icons)
Open Iconic Download Page →
Linecons Free – A Free Line-Styled Icon Font (48 Icons)
Linecons Free Download Page →
Outlined Icons by Dario Ferrando (150 Icons)
Outlined Icons Download Page →
Feather Icon Set – A Beautifully Simple Icon Font (130 Icons)
Feather Icon Set Download Page →
The Icony Icon Font (100 Icons)
Icony Download Page →
Icon Shock Icon Font (1286 Icons)
Icon Shock Font Download Page →
Stackicons Social Icon Font (75 Icons)
Stackicons Social Download Page →
Socialicious – A Social Media Icon Library (58 Icons)
Socialicious Download Page →
Weather Icon Font – A Weather Themed Icon Font (92 Icons)
Weather Icon Font Download Page →
=============================================================
网络上除了有很多漂亮的免费图标字体,也有部分图标字体是需要付费的,例如Glyphicons。Glyphicons字体对于使用Bootstrap框架的人来说再熟悉不过了,Glyphicons Halflings 一般是收费的,但是他们的作者却允许 Bootstrap 免费使用。
Glyphicons Halflings图标字体使用方法
1、从Bootstrap官网下载源码,里面含有Glyphicons字体的两个主要文件fonts文件夹和css。
2、fonts文件夹可以直接复制出来,而css需要从bootstrap.css中找到Glyphicons字体的部分复制出来。
3、复制安装包里面的fonts文件夹和css文件至自己网站所使用主题的目录下。
4、引用css文件,方法和引用主题的style.css一样,打开主题的header.php模板,在<head>与</head>之间输入如下代码:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/css/Glyphicons.min.css" rel="nofollow" />
当然,你也可以直接把里面的css直接复制粘贴到主题的style.css中合成一个css。
5、最后就可以调用字体图标了,使用时先参照官网的图标和代码对照页面 (或者这里可以),然后输入相应的代码即可。举例:
<span class="glyphicon glyphicon-home"></span> 首页
其中的glyphicon glyphicon-home就是home 这个图标的坐标代码,这些代码可以在上面的链接页面找到。
你还可以自由定制Glyphicons Halflings字体的大小以及颜色
=============================================================
免费图标字体,有很多人还特别中意Font Awesome,Font Awesome包含了大量的图标资源。
- 只需一种字体,同时拥有将近500个图标
- 无需JavaScript:Font Awesome不依赖于JS,同时中文版奥森提供了IE7+以上兼容性解决方案
- 可无限放大缩小:使用和普通字体一样自由便捷,可任意缩放
- 完全免费:完全免费,可以用于商业用途, SIL OFL 1.1 协议
- CSS可控性:通过CSS可以任意控制所有图标的大小 ,颜色,阴影。
- 完全兼容视网膜屏:由于fontawesome是矢量字体,可以完全兼容视网膜屏
- 良好兼容性:能和Bootstrap等常用UI框架一起使用,奥森(Font Awesome中文)兼容IE7+
- 桌面应用:可以用于桌面应用中
- 兼容屏幕阅读器:不像其它字体那样, 它可以兼容屏幕阅读器。
Font Awesome 图标字体使用方法
- 下载Font Awesome最新字体包,并把字体文件放置到你的项目中。
- 打开你的项目中的 font-awesome.min.css 文件并编辑字体路径指向正确的位置(字体路径是相对于你的 CSS 目录的)。
- 在html文档中的
<head>
部分,引入 font-awesome.min.css 文件。
<link rel="stylesheet" href="../css/font-awesome.min.css" rel="nofollow" >
如果需要支持 IE7 浏览器?那再引入IE7支持css
<!--[if IE 7]>
<link rel="stylesheet" href="../css/font-awesome-ie7.min.css" rel="nofollow" >
<![endif]-->
详细的集成方法及字体图标代码说明
=============================================================
图标字体中使用原创Icon方法
也许有些同学喜欢自己原创,当然也是可以滴,准备工具:Fontlab、Adobe Illustrator。
1. Fontlab:
直接在Fontlab上制作图标字体,完成后点击Fire(文件) –> Export(导出) –> EPS格式。
2. AI:
打开刚刚导出的EPS,另存为SVG格式。
3.在在线图标字体制作网站iconMoon APP中生成字体
在icoMoon APP页面点击import Icons按钮,支持多选,然后按上文的方法下载使用即可!
Tips: Fontlab和AI这两个工具的路径是可以相互复制的哦,所以我们用AI来制作ICON方便一些,制作完再复制到Fontlab上,需要注意的是在AI里面的路径画大一点再复制到Fontlab里,否则容易变形。
图标字体在chrome浏览器下被加粗的解决办法
有些icon font字体图标可能在制作的过程中出现了半个像素的问题,在浏览器下就被显示称为一个像素,造成了加粗的现象。解决这个问题的办法就是使用-webkit-font-smoothing属性。
CSS代码为:.iconfont{-webkit-font-smoothing: antialiased;}
图标字体在chrome浏览器下放大出现锯齿的解决办法
CSS代码为:.iconfont{-webkit-text-stroke-width: 0.2px;}
版权声明:本文标题:免费图标字体下载 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1728200318a1149293.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论