Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
作者:v3u.cn 发布时间:2023-09-28 13:23:19
每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人类是社交动物,而社交分享能够满足马斯洛需求金字塔情感和归属的需求以及受尊重的需求。另外网页的社交分享功能不仅可以满足阅读者,同时,对于网络应用本身,也可以相应的增加该网站的外部链接,比如微博豆瓣等线上粘性用户非常多的社交平台,如果是twitter或者facebook则可以带来一部分来自于国外的流量,对于网络平台来说,这样做即可以分发流量又可以引流导流,一箭双雕,一举而多得。
但是如果使用普通的按钮或者图片来制作分享按钮未免太过单调,这里推荐使用iconfront,那么iconfront是什么呢?它的学名叫做字体图标,是一种介于字体和图片之间的东西,它集成了字体和图片各自的优势,同时又降低了各自的劣势,我们知道几年之前awsomefont大行于世,备受追捧,但是它过大的体积另小型网站望而却步,而图片的问题在于,不论是压缩后的图片,还是雪碧图,终归还是图片,只要是图片,就还是会占用大量网络传输资源。但是字体图标的出现,却让前端开发者看到了另外一个神奇的世界,iconfront矢量图标则可缩放至你想要的任意尺寸而不心担心失真、与文字一样的处理方式,方便调整颜色与大小等。
首先打开iconfont官方网站:http:// www.iconfont.cn
比如我想要制作一个twitter的图标用来做社交分享的按钮,搜索twitter关键字
随后点击下载,下载之前别忘了登录,iconfont支持github的三方登录
可以注意到,这里我们选择了一个彩 * 标,而非纯色的,下载选择svg
那么svg又是什么呢?与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
SVG 图像可通过文本编辑器来创建和修改;
SVG 图像可被搜索、索引、脚本化或压缩;
SVG 是可伸缩的;
SVG 图像可在任何的分辨率下被高质量地打印;
SVG 可在图像质量不下降的情况下被放大;
当然了,也有劣势:浏览器渲染 svg 的性能一般,还不如 png。
此时,我们需要将svg影响通过css渲染到页面上,使用iconmoon可以帮我们完成。
打开 icomoon.io 官网
点击iconmoon app
选择导入图标
导入后,选择上传的 twitter图标
随后iconmoon会生成相应的代码
将该代码粘贴到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>
效果是这样的:
当然了,大家可以通过修改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来做成的社交分享效果是这样的,看起来还不错吧
来源:https://v3u.cn/a_id_143
猜你喜欢
- 一、什么是状态管理大到整个app的状态,用户使用app是登录状态,还是游客状态;小到一个按钮的状态,按钮是点击选中状态还是未点击状态等等,这
- Interface Segregation Principle,ISP接口隔离原则主张使用多个专门的接口比使用单一的总接口要好。一个类对另外
- 简介之前在项目中遇到了一个新需求,领导让我使用本地缓存,来缓存数据库查出的用户信息,经过一番资料查阅和实验,最终确定了使用Caffeine来
- 一、定界符成帧Framer接口package framer;import java.io.IOException;import java.i
- 一、简介   Seata 是一款开源的分布式事务解决方案,致力于在微服务架构下提供高性能和简单易用的分布
- 第一次接触到随机数还是在c语言里面 使用的是 rand(); 但是重新执行一次的时候会发现,诶,居然和上一次执行的结果是一样的,因为没有初始
- 话不多说,请看代码:<!DOCTYPE html><html><head> <meta
- 前言在 上一节 Spring解密 - 默认标签的解析 中,重点分析了 Spring 对默认标签是如何解析的,那么本章继续讲解标签解析,着重讲
- 1. 安装JDK解释: JDK是Java编写环境--开发环境注: 安装路径不可出现中文及标点符号。比如:D:\Java\jdk81.1 下载
- 一 介绍本节给知识追寻者给大家带来的是springSecurity入门篇,主要是简述下springSecrurity的启动原理和简单的入门搭
- 所谓回调,就是客户程序C调用服务程序S中的某个方法A,然后S又在某个时候反过来调用C中的某个方法B,对于C来说,这个B便叫做回调方法。下面看
- 半藏商城中会有一些用户提交了订单但是一直没有支付的情况,之前我是通过quartz定时任务每天的5点扫描未支付订单然后读取用户的邮箱地址发送邮
- 本文为大家分享了Java实现文件上传下载功能的具体代码,供大家参考,具体内容如下前端通过form表单的enctype属性,将数据传递方式修改
- 使用RateLimiter通过AOP方式进行限流1、引入依赖<!-- guava 限流 --><dependency>
- 前言二进制文件读写两个重要的函数 , fread 和 fwrite , fread 用于读取文件 , fwrite 用于写出文件 ;frea
- 一、访问控制url匹配在前面讲解了认证中所有常用配置,主要是对http.formLogin()进行操作。而在配置类中 http.author
- 先看代码public class MaxHuiWen {public static void main(String[] args) { &
- 简介官方API文档Scaffold的of方法说明有说明调用Scaffold.of方法是在Scallfold的子组件的Build方法中,也就是
- 本文实例为大家分享了Java实现五子棋游戏的具体代码,供大家参考,具体内容如下学习目的:熟悉java中swing类与java基础知识的巩固.
- 前言在前后端分离开发的时候我们需要用到参数校验,前端需要进行参数校验,后端接口同样的也需要,以防传入不合法的数据。1、首先还是先导包,导入p