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 相关文章推荐
自动化Nginx服务器的反向代理的配置方法
Jun 28 Python
Python中字符串的常见操作技巧总结
Jul 28 Python
python导出chrome书签到markdown文件的实例代码
Dec 27 Python
Python Pandas找到缺失值的位置方法
Apr 12 Python
Python简单实现网页内容抓取功能示例
Jun 07 Python
Python之用户输入的实例
Jun 22 Python
python 文件转成16进制数组的实例
Jul 09 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
Oct 09 Python
对python 匹配字符串开头和结尾的方法详解
Oct 27 Python
【python】matplotlib动态显示详解
Apr 11 Python
基于python实现微信好友数据分析(简单)
Feb 16 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
Feb 27 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
怎么使 Mysql 数据同步
2006/10/09 PHP
五个PHP程序员工具
2008/05/26 PHP
PHP的博客ping服务代码
2012/02/04 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
JavaScript 模拟用户单击事件
2009/12/31 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
python字符串连接的N种方式总结
2014/09/17 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
《Python学习手册》学习总结
2018/01/17 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
python对XML文件的操作实现代码
2020/03/27 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
预备党员入党思想汇报
2014/01/04 职场文书
幼师辞职信范文
2015/02/27 职场文书
诚信高考倡议书
2019/06/24 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers