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中的函数用法入门教程
Sep 02 Python
python中sleep函数用法实例分析
Apr 29 Python
Python selenium 三种等待方式详解(必会)
Sep 15 Python
简单了解Python中的几种函数
Nov 03 Python
python+splinter自动刷新抢票功能
Sep 25 Python
python实现将汉字保存成文本的方法
Nov 16 Python
Django框架实现的普通登录案例【使用POST方法】
May 15 Python
利用Python库Scapy解析pcap文件的方法
Jul 23 Python
在Python中用GDAL实现矢量对栅格的切割实例
Mar 11 Python
python由已知数组快速生成新数组的方法
Apr 08 Python
python GUI计算器的实现
Oct 09 Python
python处理写入数据代码讲解
Oct 22 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
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
php实现简单文件下载的方法
2015/01/30 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
javascript编码的几个方法详细介绍
2013/01/06 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
JS使用for in有序获取对象数据
2020/05/19 Javascript
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python使用thrift教程的方法示例
2019/03/21 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
关于Python错误重试方法总结
2021/01/03 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
美国著名手表网站:Timepiece
2017/11/15 全球购物
高中自我鉴定范文
2013/11/03 职场文书
工程项目经理岗位职责
2013/12/15 职场文书
个人求职信范文分享
2014/01/06 职场文书
导游个人求职信范文
2014/03/23 职场文书
借名购房协议书范本
2014/10/06 职场文书
2014年科室工作总结范文
2014/12/19 职场文书