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 19 Python
Python 错误和异常代码详解
Jan 29 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
Nov 01 Python
使用python对文件中的数值进行累加的实例
Nov 28 Python
对Xpath 获取子标签下所有文本的方法详解
Jan 02 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
Jun 27 Python
Python3操作Excel文件(读写)的简单实例
Sep 02 Python
解决django接口无法通过ip进行访问的问题
Mar 27 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
Jun 05 Python
Python常用扩展插件使用教程解析
Nov 02 Python
Selenium 安装和简单使用的实现
Dec 04 Python
Python 中数组和数字相乘时的注意事项说明
May 10 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
二级域名转向类
2006/11/09 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
vue表单自定义校验规则介绍
2018/08/28 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
python实现自动解数独小程序
2019/01/21 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
jupyter实现重新加载模块
2020/04/16 Python
如何利用Python写个坦克大战
2020/11/18 Python
求职信的要素有哪些呢
2013/12/26 职场文书
医院辞职信范文
2014/01/17 职场文书
住宅使用说明书
2014/05/09 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
2015年推普周活动总结
2015/03/27 职场文书
MySQL分布式恢复进阶
2022/07/23 MySQL