您当前的位置:首页 > 网站建设笔记 >

使用字符图标替换百度分享按钮

0

前天写了一篇《自定义百度分享按钮样式》的文章,今天来改变一下样式,主要是使用字符图标来显示按钮(百度分享按钮默认的是使用背景图片)。

我所采用的字符图标是源自出色的Fontello-icon fonts generator网站上选择下载的,该网站所提供的字符图标可以说是非常齐全,而且功能强大,可在线任意选择所想要的图标并下载使用(网站会自动帮你生成各种格式的字体文件并提供了demo供你测试,而这些字体文件只包含了你所选择的图标,大大节省你网站的流量和减小字体文件的体积,还有一个功能特别人性化,就是在你下载的压缩包里有一个config.json文件,该文件的作用相当重要,在你日后想基于目前的字体文件上增加其他图标,只要把config.json文件导入网站即可还原之前你所选择的全部图标而无需你重新勾选,此时你只需要勾选你想新增的其他图标即可)。实现的代码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>使用字符图标替换百度分享按钮-网站程序网</title>
<style type="text/css">
/*
加入字符图标相关样式规则,或使用链接样式文件方式加载字符图标样式文件进来
*/
@font-face {
  font-family:'book';
  src:url('fonts/book.eot?49203730');
  src:url('fonts/book.eot?49203730#iefix') format('embedded-opentype'),
  url('fonts/book.woff2?49203730') format('woff2'),
  url('fonts/book.woff?49203730') format('woff'),
  url('fonts/book.ttf?49203730') format('truetype'),
  url('fonts/book.svg?49203730#book') format('svg');
  font-weight:normal;font-style:normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family:"book";
  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;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/*
为了节省篇幅,这里只列出分享图标
*/
.icon-wechat:before{content:'\f1d7';}
.icon-qq:before{content:'\f1d6';}
.icon-sina-weibo:before{content:'\f33f';}
.icon-tencent-weibo:before{content:'\f1d5';}
.icon-renren:before{content:'\f18b';}
/*
 覆盖百度分享代码默认设置的按钮样式规则
 */
.diyShare {width:100%;margin:0 auto;text-align:center}
.diyShare .bdsharebuttonbox {display:table;margin:0 auto}

.diyShare .bdsharebuttonbox a {float:left;font-size:0.75em;display:block;padding:0 12px;height:32px;line-height:32px;margin:0 3px;border-radius:5px;text-decoration:none;color:#FFF;text-indent:0;width:auto}
.diyShare .bdsharebuttonbox a:hover {color:#FFF}
.diyShare .bdsharebuttonbox .bds_count {width:48px;padding:0;text-align:center;color:#333}
.diyShare .bdsharebuttonbox .bds_count:hover{color:#000}
 
.diyShare .bdsharebuttonbox .bds_more{color:#444;padding:0;margin:0;background:none}
.diyShare .bdsharebuttonbox .bds_more:hover{color:black}
 
.diyShare .bdsharebuttonbox a.bds_weixin {background:#3CB034}
.diyShare .bdsharebuttonbox a.bds_sqq {background:#2384CC}
.diyShare .bdsharebuttonbox a.bds_tsina {background:#E6162D}
.diyShare .bdsharebuttonbox a.bds_qzone {background:#FFCE00}
.diyShare .bdsharebuttonbox a.bds_tqq {background:#45AAF2}
.diyShare .bdsharebuttonbox a.bds_renren {background:#217DC6}
.diyShare [class*=" icon-"]:before{font-size:1.25em;margin-right:0.3em}
</style>
</head>
<body>
 
<div class="diyShare">
  <div class="bdsharebuttonbox">
  <a href="#" class="bds_more" data-cmd="more">分享到:</a>
  <a href="#" class="bds_weixin icon-wechat" data-cmd="weixin" title="分享到微信">微信</a>
  <a href="#" class="bds_sqq icon-qq" data-cmd="sqq" title="分享到QQ好友">QQ好友</a>
  <a href="#" class="bds_tsina icon-sina-weibo" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
  <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
  <a href="#" class="bds_tqq icon-tencent-weibo" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a>
  <a href="#" class="bds_renren icon-renren" data-cmd="renren" title="分享到人人网">人人网</a>
  <a class="bds_count" data-cmd="count"></a>
  </div>
</div>

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"image":{"viewList":["weixin","sqq","tsina","qzone","tqq","renren"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["weixin","sqq","tsina","qzone","tqq","renren"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</body>
</html>

效果如下所示:

点击下载:使用字符图标替换百度分享按钮效果代码.rar

Fontello网站上的字符图标种类多数量大,但遗憾的是我没有找到QQ空间的图标,各位童鞋你们找到了吗?使用字符图标相当方便,比使用背景图片有如下优点:

  • 可自由设置字符图标的大小(任意缩放,适合响应式设计)、颜色、阴影、透明效果、转化形态等,就跟设置字体所有相关的样式一样设置字符图标的样式;
  • 可使网页加载速度更快,比使用背景图片体积小,减少HTTP服务器请求;
  • 很容易维护。

然而,使用字符图标并不是完美无缺,它也有以下不足之处:

  • 字符图标只能被渲染成单色或者CSS3的渐变色;
  • 使用限制是很大的,除非你想花时间去创作自己想要的字符图标;
  • 创作字符图标需要花费更多的时间与精力。

第一条不是很大问题,因为你不会哪里都使用它们,不过就是因为字符图标受颜色的限制这个根本性因素使得它不能广泛使用。

最后两条也不是很大问题,很多免费、优秀的字符图标不断地增多,因此可以利用的这些资源也是不断增多,所以不必要一定去原创属于自己的字符图标。

建站咨询

在线咨询真诚为您提供专业解答服务

咨询热线

137 1731 25507×24小时服务热线

微信交流

二维码终于等到你,还好我没放弃
返回顶部