图标字体的使用(fontello.com)字体推荐及使用技巧
网页设计中为了页面漂亮好看,图标是少不了,网页中使用的图标通常都是使用图片,使用图片图标的有很多弊端,如果你经常制作网页应该有一肚子埋怨。
使用图片图标的弊端
- 放大图标必须重新作图,
- 改变颜色必须开启作图软件重新调色,并且不同的颜色就要对应一个图片图标
- 更多弊端不一一列举
如果这些图标能像字体一样,改变大小,更改颜色,那岂不是太爽了,下面的文字就是介绍一种在网页中使用图标字体的方法。
下面懒人建站来介绍图标字体的使用(fontello.com)字体的使用以及技巧
首先:使用火狐、谷歌或者360极速模式(注:因为你选择的图标使用本地存储记忆的,这在后面会提到怎么利用本地存储在其他电脑上打开依然显示你选中的图
标)打开http://fontello.com/这个图标字体网站,全英文的,不过懂不懂英文不重要,打开网站后用鼠标点选你中意的图标,全部选好以
后,点击 右上角的红色下载按钮,就可以下载到一个压缩吧,解压出来,里面有类似 fontello.eot fontello.svg fontello.ttf fontello.woff 四种字体格式。
复制如下代码到你的样式表文件中,注意你的字体文件路径要对,根据实际情况自行修改 src: url('font/ 中的路径
/*图标字体*/
@font-face {
font-family: 'fontello';
src: url('font/fontello.eot');
src: url('font/fontello.eot#iefix') format('embedded-opentype'),
url('font/fontello.woff') format('woff'),
url('font/fontello.ttf') format('truetype'),
url('font/fontello.svg#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
.ficon,[class^="ficon-"],[class^="ficon-"]:before,[class*=" ficon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
}
调用方法:在页面中书写类似这样的标签,html标签可以随便选,但是类名要和你上面定义的一致,如:<span class="ficon"></span>
解决IE6 7兼容
字体图标在IE67下稍微要做一点兼容处理,不然页面中无法显示图标,在页面的head区域粘贴如下代码:
如果你的网页只是针对高级浏览器,不考虑IE9以下浏览器的话, 你可以使用CSS伪对象选择器如:.icon-eye:before { content: '\e839'; }
如何让你选择的字体图标在其他浏览器上打开依然显示你选中的图标
这里还真没试在不支持本地存储的浏览器上是不是有兼容方案,有兴趣的可以试一下。这里只说支持本地存储的浏览器,比如火狐、谷歌等。
这里用到两条命令:获取本地存储: window.localStorage.getItem('fontello:sessions:v4'); 设置本地存储:window.localStorage.setItem(key:value),懂的看到这可以闪人了,不知道的可以往下看。
以火狐为例,打开fontello.com,先来选择几个图标,然后F12打开控制台,点击“控制台”输入命令:window.localStorage.getItem('fontello:sessions:v4');'fontello:sessions:v4'是名字,我在测试的时候他是这个名字,如果没有,你可以用以下代码把所有本地存储的key value值都遍历出来
for(var i=localStorage.length - 1 ; i >=0; i--){
console.log('第'+ (i+1) +'条数据的键值为:' + localStorage.key(i) +',数据为:' + localStorage.getItem(localStorage.key(i)));
}
把'fontello:sessions:v4'的值给复制出来,保存备用。
在其他支持本地存储的浏览器中打开fontello.com,F12打开控制台,点击“控制台”输入命令window.localStorage.setItem(key:value) key 和 value 换成实际的值,
示例: window.localStorage.setItem('fontello:sessions:v4','{"font_size":16,"sessions":[{"name":"$current$","fontname":"","css_prefix_text":"icon-","css_use_suffix":false,"hinting":true,"encoding":"pua","font_fullname":"","font_units":1000,"font_ascent":850,"font_copyright":"","fonts":{"custom_icons":{"collapsed":false,"glyphs":[]},"fontelico":{"collapsed":false,"glyphs":[{"uid":"53ed8570225581269cd7eff5795e8bea","selected":false,"code":59392,"css":"emo-unhappy"},{"uid":"2bd5f98482d86649958312ea2ab5bb40","selected":false,"code":59393,"css":"emo-laugh"},{"uid":"9bc2902722abb366a213a052ade360bc","selected":true,"code":59407,"css":"spin6"}]},"fontawesome":{"collapsed":false,"glyphs":[{"uid":"9dd9e835aebe1060ba7190ad2b2ed951","selected":true,"code":59392,"css":"search"},{"uid":"ef74ff62feda486fd414410e782b598a","selected":true,"code":59460,"css":"graduation-cap"},{"uid":"7fe35dea791456114c356934333b4171","selected":true,"code":59404,"css":"renren"},{"uid":"d1945696d6bbbf84e388df9961f26a37","selected":true,"code":59408,"css":"sina-weibo"}]},"typicons":{"collapsed":false,"glyphs":[]},"iconic":{"collapsed":false,"glyphs":[]},"modernpics":{"collapsed":false,"glyphs":[]},"meteocons":{"collapsed":false,"glyphs":[]},"mfglabs":{"collapsed":false,"glyphs":[]},"maki":{"collapsed":false,"glyphs":[]},"zocial":{"collapsed":false,"glyphs":[]},"brandico":{"collapsed":false,"glyphs":[]},"elusive":{"collapsed":false,"glyphs":[]},"linecons":{"collapsed":false,"glyphs":[]},"websymbols":{"collapsed":false,"glyphs":[]}}}]}');
如果你重新增删了图标以后,需要重新获取使用window.localStorage.getItem('fontello:sessions:v4')命令获取新值。
图标字体的使用(fontello.com)字体推荐及使用技巧的更多相关文章
- !!字体图标(iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等)。 图片压缩
http://www.iconfont.cn/ 阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.c ...
- Ubuntu 字体设置:使用Windows 字体
基础知识 Sans-serif=无衬线体=黑体:并不是具体一款字体,而是一类字体,选择它其实等于选择这类字体中优先级最高的那款字体. Serif=衬线体=白体:同上 Monospace=等宽字体,意思 ...
- Fedora 24 Linux 环境下实现 Infinality 字体渲染增强及 Java 字体渲染改善的方法(修订)
Fedora 24 Linux 桌面环境默认字体渲染引擎 freetype 及字体配置工具 fontconfig 采用的是未经优化的编译及设置,字体渲染效果比较差.而某些 Linux 发行版的桌面字体 ...
- app 要求字体使用楷体,使用字体包
1,下载字体包 http://www.3987.com/xiazai/6/fonts/36616.html#down 2. studio中src\main\创建assets\fonts,存放 ...
- 微软雅黑字体IE6 opacity改变,字体会变样子
微软雅黑字体IE6 opacity改变,字体会变样子,换个字体就好了
- CSS为英文和中文字体分别设置不同的字体
font-family的调用方法: div { font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px ...
- 修改eclipse 代码字体大小以及文档字体大小
1..点击[window]在弹出的窗口中选择[preferences] 2.在弹出窗口中找到依次点击General(常规)——Apprearance(外观)——Colors and Fonts(颜色和 ...
- rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题
rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题 判断是特殊机型,做特殊处理. var u=navigator.userAgent; if($(window).width() ...
- 字体图标-把SVG图标转换成所需要的字体图标
小科普: 想必小伙伴们多少都了解或使用过字体图标,总体来说优点多于缺点,优点如下图: 任意缩放,图标不会失真: 可以改变图标颜色: 可以设置图标阴影: 可以设置透明效果: 主流浏览器都支持: 可以快速 ...
随机推荐
- 3 视频里weekend05、06、07的可靠性 + HA原理、分析、机制 + weekend01、02、03、04、05、06、07的分布式集群搭建
现在,我们来验证分析下,zookeeper集群的可靠性 现在有weekend05.06.07 将其一个关掉, 分析,这3个zookeeper集群里,杀死了weekend06,还存活weekend05. ...
- 395. Coins in a Line II
最后更新 这个题做得也不好,dp[n]尝试写了几下,不太对. 应该是类似于gem theory的题. 当只有1个硬币剩下的时候直接拿走,不BB. 剩俩的时候也都拿了.. dp[n]表示剩下多少个硬币. ...
- office文件在线预览,模仿网易邮箱在线预览的
最近研究了半天,代码是倾情奉送啊,C#,asp.net的 这个原理是office文件转换为PDF文件,然后再转换成SWF文件,FlexPaper+swfTools. 有个问题,需要在web.confi ...
- 为什么String要设计成不可变的?
英文原:http://www.programcreek.com/2013/04/why-string-is-immutable-in-java/ 转自:http://blog.csdn.net/ren ...
- Quartz定时任务学习(六)作业
org.quartz.Job 接口 把 Quartz 作用到 Java 类上唯一要做的就是让它实现 org.quartz.Job 接口.你的 Job 类可以实现任何其他想要的接口或继承任何需要的基类, ...
- linux jdk tomcat
linux jdk tomcat mysql的安装 mysql的话,推荐使用命令行安装,而不是用外部的源码去编译,因为简单粗暴. mysql服务:sudo apt-get install mysql- ...
- Unity3d + NGUI 多分辨率适应
更多型号适合的移动终端 现在我们要介绍的<链战争>游戏改编方法,这种适应方法UI这是一个基本维度,背景是一个基本的尺寸.背景比UI没有实际影响某一部分的额外部分,这样就避免了适应iPhon ...
- oracle10 权限角色
管理权限和角色 介绍 这一部分我们主要看看oracle中如何管理权限和角色,权限和角色的区别在那里. 当刚刚建立用户时,用户没有任何权限,也不能执行任何操作,oracle数据库会自动创建一个方案, ...
- hdu2015java
偶数求和 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submissio ...
- 高性能爬虫为什么使用定制DNS客户端?
DNS 解析是高性能网络爬虫的瓶颈,主要是因为: 1. 由于域名服务的分布式的特性,DNS解析可能需要多次的请求转发,有时需要几秒甚至更长的时间来解析出相应的IP 地址. 2. 现有的标准库对DNS解 ...