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 相关文章推荐
Python2.7+pytesser实现简单验证码的识别方法
Dec 29 Python
pycharm执行python时,填写参数的方法
Oct 29 Python
django url到views参数传递的实例
Jul 19 Python
利用Python库Scapy解析pcap文件的方法
Jul 23 Python
利用pandas合并多个excel的方法示例
Oct 10 Python
python 循环数据赋值实例
Dec 02 Python
python实现ip地址的包含关系判断
Feb 07 Python
python字符串下标与切片及使用方法
Feb 13 Python
执行Python程序时模块报错问题
Mar 26 Python
python实例化对象的具体方法
Jun 17 Python
Python的轻量级ORM框架peewee使用教程
Feb 05 Python
Python获取指定日期是"星期几"的6种方法
Mar 13 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
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
使用django实现一个代码发布系统
2019/07/18 Python
python数组循环处理方法
2019/08/26 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
python实现简单的tcp 文件下载
2020/09/16 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
一套Java笔试题
2016/08/20 面试题
2014年机关植树节活动方案
2014/02/27 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
期中考试后的感想
2015/08/07 职场文书
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android