郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

博彩评级专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

博彩评级提供网页素材下载、网站模板
这一切都是免费的!
当前位置:博彩评级 > div+css > css教程 >

图标字体的使用(fontello.com)字体推荐及使用技巧

来源:jquery特效 作者: 博彩评级 日期:2014-12-02 人气:
网页设计中为了页面漂亮好看,图标是少不了,网页中使用的图标通常都是使用图片,如果这些图标能像字体一样,改变大小,更改颜色,那岂不是太爽了,下面的文字就是介绍一种在

本文地址:http://www.qqydc.com/html+css/htmlcssjq/icon_font.html
文章摘要:图标字体的使用(fontello.com)字体推荐及使用技巧,拔葵去织双胶纸办事指南,雪碗冰瓯你给我滚大一。

网页设计中为了页面漂亮好看,图标是少不了,网页中使用的图标通常都是使用图片,使用图片图标的有很多弊端,如果你经常制作网页应该有一肚子埋怨。

使用图片图标的弊端
  1. 放大图标必须重新作图,
  2. 改变颜色必须开启作图软件重新调色,并且不同的颜色就要对应一个图片图标
  3. 更多弊端不一一列举

如果这些图标能像字体一样,改变大小,更改颜色,那岂不是太爽了,下面的文字就是介绍一种在网页中使用图标字体的方法。

下面博彩评级来介绍图标字体的使用(fontello.com)字体的使用以及技巧

首先:使用火狐、谷歌或者360极速模式(注:因为你选择的图标使用本地存储记忆的,这在后面会提到怎么利用本地存储在其他电脑上打开依然显示你选中的图标)打开http://www.qqydc.com/199/这个图标字体网站,全英文的,不过懂不懂英文不重要,打开网站后用鼠标点选你中意的图标,全部选好以后,点击 右上角的红色下载按钮,就可以下载到一个压缩吧,解压出来,里面有类似 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">&#xe813;</span>

解决IE6 7兼容

字体图标在IE67下稍微要做一点兼容处理,不然页面中无法显示图标,在页面的head区域粘贴如下代码:

<!--[if lt IE 7]>
    <style>
        .ficon{font-family:'fontello'}
    </style>
    <![endif]-->

如果你的网页只是针对高级浏览器,不考虑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')命令获取新值。

jquery特效http://www.qqydc.com/ 整理发布

本文链接:图标字体的使用(fontello.com)字体推荐及使用技巧http://www.qqydc.com/html+css/htmlcssjq/icon_font.html

图标字体的使用(fontello.com)字体推荐及使用技巧由博彩评级收集整理,您可以自由传播,请主动带上本文链接

博彩评级就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

(责任编辑:博彩评级)