链接图标

更新时间: 8/31/2025, 1:51:17 PM

Vitepress中文搭建教程
本文参考至：VitePress快速上手中文教程，在其基础上略作修改

在theme/style新建link.css文件

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.mts
│  │  └─ theme
│  │     └─ style
│  │        └─ index.css
│  │        └─ link.css
│  └─ index.md
└─ node_modules

将下面代码，复制粘贴到link.css中

css

/* .vitepress/theme/style/link.css */

/* YouTube */
.vp-doc a[href^="https://www.youtube.com/"]:before {
    content: '';
    background-image: url(/icons/youtube.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    margin-right: 4px;
}

/* 哔哩哔哩 */
.vp-doc a[href^="https://www.bilibili.com/"]:before {
    content: '';
    background-image: url(/icons/bilibili.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    top: -1 px;
    margin-right: 4px;
}

/* 哔哩哔哩个人空间 */
.vp-doc a[href^="https://space.bilibili.com/"]:before {
    content: '';
    background-image: url(/icons/bilibili.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    top: -1 px;
    margin-right: 4px;
}

/* 爱发电 */
.vp-doc a[href^="https://afdian.com/"]:before {
    content: '';
    background-image: url(/icons/aifadian.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    top: 0 px;
    margin-right: 4px;
}

/* Github */
.vp-doc a[href^="https://github.com/"]:before {
    content: '';
    background-image: url(/icons/github.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    top: -4 px;
    margin-right: 4px;
}

/* QQ频道 */
.vp-doc a[href^="https://pd.qq.com/"]:before {
    content: '';
    background-image: url(/icons/QQ.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    top: -4 px;
    margin-right: 4px;
}

然后在index.css中引入生效

css

/* .vitepress/theme/style/index.css */
@import './link.css';

用法

油管链接图标：[Youtube](https://www.youtube.com/)

B站链接图标：[哔哩哔哩](https://space.bilibili.com/1323019347)

爱发电链接图标：[爱发电](https://afdian.com/a/mcooooo)

Github链接图标：[Github](https://github.com/GeminiAlpha-1)

QQ频道链接图标：[QQ频道](https://pd.qq.com/)

油管链接图标：Youtube

B站链接图标：哔哩哔哩

爱发电链接图标：爱发电

Github链接图标：Github

QQ频道链接图标：QQ频道

链接图标 ​

链接图标