Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统


Posted in Python onApril 21, 2020

每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人类是社交动物,而社交分享能够满足马斯洛需求金字塔情感和归属的需求以及受尊重的需求。另外网页的社交分享功能不仅可以满足阅读者,同时,对于网络应用本身,也可以相应的增加该网站的外部链接,比如微博豆瓣等线上粘性用户非常多的社交平台,如果是twitter或者facebook则可以带来一部分来自于国外的流量,对于网络平台来说,这样做即可以分发流量又可以引流导流,一箭双雕,一举而多得。

但是如果使用普通的按钮或者图片来制作分享按钮未免太过单调,这里推荐使用iconfront,那么iconfront是什么呢?它的学名叫做字体图标,是一种介于字体和图片之间的东西,它集成了字体和图片各自的优势,同时又降低了各自的劣势,我们知道几年之前awsomefont大行于世,备受追捧,但是它过大的体积另小型网站望而却步,而图片的问题在于,不论是压缩后的图片,还是雪碧图,终归还是图片,只要是图片,就还是会占用大量网络传输资源。但是字体图标的出现,却让前端开发者看到了另外一个神奇的世界,iconfront矢量图标则可缩放至你想要的任意尺寸而不心担心失真、与文字一样的处理方式,方便调整颜色与大小等。

首先打开iconfont官方网站:http:// www.iconfont.cn

比如我想要制作一个twitter的图标用来做社交分享的按钮,搜索twitter关键字

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统

随后点击下载,下载之前别忘了登录,iconfont支持github的三方登录

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统

可以注意到,这里我们选择了一个彩色图标,而非纯色的,下载选择svg

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统

那么svg又是什么呢?与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

SVG 图像可通过文本编辑器来创建和修改;
SVG 图像可被搜索、索引、脚本化或压缩;
SVG 是可伸缩的;
SVG 图像可在任何的分辨率下被高质量地打印;
SVG 可在图像质量不下降的情况下被放大;

当然了,也有劣势:浏览器渲染 svg 的性能一般,还不如 png。

此时,我们需要将svg影响通过css渲染到页面上,使用iconmoon可以帮我们完成。

打开 icomoon.io 官网

点击iconmoon app

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统

选择导入图标

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统

导入后,选择上传的 twitter图标

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统

随后iconmoon会生成相应的代码

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统

将该代码粘贴到html文件中即可使用

<span class="icon-icon_twitter"><span class="path1"></span><span class="path2"></span></span>
<style>
@font-face {
 font-family: 'icomoon';
 src: url('https://i.icomoon.io/public/temp/1299242a74/UntitledProject/icomoon.eot?v3mere');
 src: url('https://i.icomoon.io/public/temp/1299242a74/UntitledProject/icomoon.eot?v3mere#iefix') format('embedded-opentype'),
 url('https://i.icomoon.io/public/temp/1299242a74/UntitledProject/icomoon.ttf?v3mere') format('truetype'),
 url('https://i.icomoon.io/public/temp/1299242a74/UntitledProject/icomoon.woff?v3mere') format('woff'),
 url('https://i.icomoon.io/public/temp/1299242a74/UntitledProject/icomoon.svg?v3mere#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
 font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
 /* use !important to prevent issues with browser extensions that change fonts */
 font-family: 'icomoon' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.icon-icon_twitter .path1:before {
 content: "e900";
 color: rgb(120, 203, 239);
}
.icon-icon_twitter .path2:before {
 content: "e901";
 margin-left: -1em;
 color: rgb(255, 255, 255);
}
</style>

效果是这样的:

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统

当然了,大家可以通过修改css来控制该矢量图的大小

矢量图标搞定了,现在我们来考虑怎么进行点击分享,其实市面上主流的社交平台都有自己的分享接口:

var sites = {
 qzone: 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITLE}}&desc={{DESCRIPTION}}&summary={{SUMMARY}}&site={{SOURCE}}&pics={{IMAGE}}',
 qq: 'http://connect.qq.com/widget/shareqq/index.html?url={{URL}}&title={{TITLE}}&source={{SOURCE}}&desc={{DESCRIPTION}}&pics={{IMAGE}}&summary="{{SUMMARY}}"',
 weibo: 'https://service.weibo.com/share/share.php?url={{URL}}&title={{TITLE}}&pic={{IMAGE}}&appkey={{WEIBOKEY}}',
 wechat: 'javascript:',
 douban: 'http://shuo.douban.com/!service/share?href={{URL}}&name={{TITLE}}&text={{DESCRIPTION}}&image={{IMAGE}}&starid=0&aid=0&style=11',
 linkedin: 'http://www.linkedin.com/shareArticle?mini=true&ro=true&title={{TITLE}}&url={{URL}}&summary={{SUMMARY}}&source={{SOURCE}}&armin=armin',
 facebook: 'https://www.facebook.com/sharer/sharer.php?u={{URL}}',
 twitter: 'https://twitter.com/intent/tweet?text={{TITLE}}&url={{URL}}&via={{ORIGIN}}'
 };

只需要配合js来传入相应的参数即可

最后,结合iconfont的和js来做成的社交分享效果是这样的,看起来还不错吧

到此这篇关于Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统的文章就介绍到这了,更多相关Iconfont iconmoon javascript 社交分享系统内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
python使用在线API查询IP对应的地理位置信息实例
Jun 01 Python
Python实现包含min函数的栈
Apr 29 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
Sep 15 Python
Python编程之event对象的用法实例分析
Mar 23 Python
Python中的defaultdict与__missing__()使用介绍
Feb 03 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
Mar 14 Python
numpy返回array中元素的index方法
Jun 27 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
Jul 15 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
Aug 21 Python
Kears+Opencv实现简单人脸识别
Aug 28 Python
解决python运行效率不高的问题
Jul 20 Python
python 获取剪切板内容的两种方法
Nov 28 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
Apr 20 #Python
jupyter notebook 的工作空间设置操作
Apr 20 #Python
Tensorflow中的降维函数tf.reduce_*使用总结
Apr 20 #Python
Python yield生成器和return对比代码实例
Apr 20 #Python
jupyter notebook tensorflow打印device信息实例
Apr 20 #Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
Apr 20 #Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
Apr 20 #Python
You might like
golang与PHP输出excel示例
2016/07/22 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
django中的图片验证码功能
2019/09/18 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
python的列表List求均值和中位数实例
2020/03/03 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书
医院工作检讨书范文
2014/02/10 职场文书
党员实事承诺书
2014/03/26 职场文书
政府法律服务方案
2014/06/14 职场文书
思想作风建设心得体会
2014/10/22 职场文书
中国世界遗产导游词
2015/02/13 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书