在网页里放几个分享小标志，是引导用户传播内容的常见做法。比起早期用图片拼图标，现在更推荐用字体图标或者SVG来画分享按钮，体积小、清晰度高，还能用CSS随便改颜色。下面以Font Awesome这套字体图标库为例，完整讲一遍怎么在纯HTML页面里把分享功能做出来。
一、引入字体图标库
要在HTML中用分享小标志，第一步是把图标库引进来。Font Awesome提供了CDN链接，直接写进<head>即可，不需要下载任何文件。引入之后，页面就能识别像<i class="fas fa-share"></i>这样的标签并渲染成图标。
如果不想用CDN，也可以把CSS和字体文件放到自己服务器上，用相对路径引入，这样在离线环境也能用。需要注意的是，图标类名分免费版和Pro版，免费版足够覆盖微信、微博、QQ这类常见分享场景。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>分享图标示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontawesome/fontawesome-free@6.5.1/css/all.min.css">
</head>
<body>
<div class="share-box">
<i class="fas fa-share-nodes"></i>
</div>
</body>
</html>
二、摆放具体的分享图标
光有一个总的分享标志还不够，通常要列出微信、微博、QQ空间等具体平台的小图标。Font Awesome里对应类名分别是fab fa-weixin、fab fa-weibo、fab fa-qq。我们用一个容器把它们横向排开，再用CSS稍作美化。
这里用flex布局让图标居中且有间距，同时给图标加hover效果，鼠标移上去轻微放大并变主题色，提升点击欲望。这种纯CSS交互不需要JS，性能好也更简单。
<style>
.share-list {
display: flex;
gap: 16px;
justify-content: center;
margin-top: 20px;
}
.share-list i {
font-size: 28px;
color: #666;
cursor: pointer;
transition: transform 0.2s, color 0.2s;
}
.share-list i:hover {
transform: scale(1.15);
color: #1da1f2;
}
</style>
<div class="share-list">
<i class="fab fa-weixin" title="分享到微信"></i>
<i class="fab fa-weibo" title="分享到微博"></i>
<i class="fab fa-qq" title="分享到QQ"></i>
</div>
三、绑定分享逻辑
图标摆好之后，得让点击真正触发分享动作。对于微博和QQ，可以直接拼装带参数URL并用window.open打开分享页；微信在PC端一般只能生成二维码，移动端可借navigator.share调起系统分享。下面给出一段原生JS示例。
这段代码给每个图标加了data-type属性，点击时读取类型，拼出对应分享地址。如果是移动端且浏览器支持navigator.share，就优先用系统原生分享，体验更顺滑。注意encodeURIComponent用来处理中文标题和链接，避免乱码。
document.querySelectorAll('.share-list i').forEach(function (el) {
el.addEventListener('click', function () {
var type = el.getAttribute('data-type');
var url = location.href;
var title = document.title;
if (type === 'weibo') {
var wb = 'https://service.weibo.com/share/share.php?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title);
window.open(wb, '_blank');
} else if (type === 'qq') {
var qq = 'https://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title);
window.open(qq, '_blank');
} else if (type === 'weixin' && navigator.share) {
navigator.share({ title: title, url: url }).catch(function () {});
} else {
alert('请复制链接在微信中打开：' + url);
}
});
});
四、优缺点与替代方案
用字体图标加原生JS实现分享小标志，最大优点是零依赖、加载快、样式可控。整页额外请求只有一个CSS，图标是矢量的，在高分屏也不会糊。缺点是各平台分享接口规则会变，需要偶尔维护链接格式。
如果不想自己维护，也可以用现成的share.js这类轻量插件，或者直接用SVG行内图标替代字体库，彻底不依赖外部CSS。但无论如何，核心思路都是在HTML里留出图标位置、用CSS控制外观、用JS处理点击，三者分开更利于后期改版。
| 方案 | 体积 | 维护成本 |
|---|---|---|
| 字体图标+原生JS | 小 | 低 |
| SVG内联 | 极小 | 中 |
| 第三方分享SDK | 大 | 高 |
五、小结
在HTML页面添加分享图标功能并不复杂，关键就是选一种矢量图标方案，把标志用HTML标签放出来，再用少量脚本把点击和分享动作连起来。掌握这个套路后，不管是博客还是活动页，都能快速接上分享能力。
实际项目中建议把分享逻辑封装成独立函数，图标样式用CSS变量管理，后期换肤或增删平台都只需改几行配置，不用动结构。
HTMLshare_iconfont_awesome修改时间：2026-08-03 21:45:39