快捷導(dǎo)航

Iconfont(矢量圖標(biāo))+iconmoon(圖標(biāo)svg互轉(zhuǎn))配合javascript實(shí)現(xiàn)社交分享系統(tǒng)

更新時(shí)間：2020年04月21日 14:14:25 作者：v3u.cn

這篇文章主要介紹了Iconfont(矢量圖標(biāo))+iconmoon(圖標(biāo)svg互轉(zhuǎn))配合javascript實(shí)現(xiàn)社交分享系統(tǒng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

每一個(gè)應(yīng)用程序，其實(shí)都會(huì)有分享的需求，比如一鍵分享一篇文章或者一些活動(dòng)到微博或者微信亦或者是twitter等社交平臺(tái)，因?yàn)槿祟愂巧缃粍?dòng)物，而社交分享能夠滿足馬斯洛需求金字塔情感和歸屬的需求以及受尊重的需求。另外網(wǎng)頁(yè)的社交分享功能不僅可以滿足閱讀者，同時(shí)，對(duì)于網(wǎng)絡(luò)應(yīng)用本身，也可以相應(yīng)的增加該網(wǎng)站的外部鏈接，比如微博豆瓣等線上粘性用戶非常多的社交平臺(tái)，如果是twitter或者facebook則可以帶來(lái)一部分來(lái)自于國(guó)外的流量，對(duì)于網(wǎng)絡(luò)平臺(tái)來(lái)說(shuō)，這樣做即可以分發(fā)流量又可以引流導(dǎo)流，一箭雙雕，一舉而多得。

但是如果使用普通的按鈕或者圖片來(lái)制作分享按鈕未免太過(guò)單調(diào)，這里推薦使用iconfront，那么iconfront是什么呢？它的學(xué)名叫做字體圖標(biāo)，是一種介于字體和圖片之間的東西，它集成了字體和圖片各自的優(yōu)勢(shì)，同時(shí)又降低了各自的劣勢(shì)，我們知道幾年之前awsomefont大行于世，備受追捧，但是它過(guò)大的體積另小型網(wǎng)站望而卻步，而圖片的問題在于，不論是壓縮后的圖片，還是雪碧圖，終歸還是圖片，只要是圖片，就還是會(huì)占用大量網(wǎng)絡(luò)傳輸資源。但是字體圖標(biāo)的出現(xiàn)，卻讓前端開發(fā)者看到了另外一個(gè)神奇的世界，iconfront矢量圖標(biāo)則可縮放至你想要的任意尺寸而不心擔(dān)心失真、與文字一樣的處理方式，方便調(diào)整顏色與大小等。

首先打開iconfont官方網(wǎng)站：http:// www.iconfont.cn

比如我想要制作一個(gè)twitter的圖標(biāo)用來(lái)做社交分享的按鈕，搜索twitter關(guān)鍵字

隨后點(diǎn)擊下載，下載之前別忘了登錄，iconfont支持github的三方登錄

可以注意到，這里我們選擇了一個(gè)彩色圖標(biāo)，而非純色的，下載選擇svg

那么svg又是什么呢？與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優(yōu)勢(shì)在于：

SVG 圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改；
SVG 圖像可被搜索、索引、腳本化或壓縮；
SVG 是可伸縮的；
SVG 圖像可在任何的分辨率下被高質(zhì)量地打?。?br /> SVG 可在圖像質(zhì)量不下降的情況下被放大；

當(dāng)然了，也有劣勢(shì)：瀏覽器渲染 svg 的性能一般，還不如 png。

此時(shí)，我們需要將svg影響通過(guò)css渲染到頁(yè)面上，使用iconmoon可以幫我們完成。

打開 icomoon.io 官網(wǎng)

點(diǎn)擊iconmoon app

選擇導(dǎo)入圖標(biāo)

導(dǎo)入后，選擇上傳的 twitter圖標(biāo)

隨后iconmoon會(huì)生成相應(yīng)的代碼

將該代碼粘貼到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>

效果是這樣的:

當(dāng)然了，大家可以通過(guò)修改css來(lái)控制該矢量圖的大小

矢量圖標(biāo)搞定了，現(xiàn)在我們來(lái)考慮怎么進(jìn)行點(diǎn)擊分享，其實(shí)市面上主流的社交平臺(tái)都有自己的分享接口：

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來(lái)傳入相應(yīng)的參數(shù)即可

最后，結(jié)合iconfont的和js來(lái)做成的社交分享效果是這樣的，看起來(lái)還不錯(cuò)吧

到此這篇關(guān)于Iconfont(矢量圖標(biāo))+iconmoon(圖標(biāo)svg互轉(zhuǎn))配合javascript實(shí)現(xiàn)社交分享系統(tǒng)的文章就介紹到這了,更多相關(guān)Iconfont iconmoon javascript 社交分享系統(tǒng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: