如何自定义Bootstrap中的LinkedIn图标，添加链接、调整大小与颜色

现有原始图标代码：

<i class="bi bi-linkedin"></i>

1. 添加跳转链接 #

直接将图标标签嵌套在<a>超链接标签中即可，href属性填写你要跳转的目标地址：

<a href="你的LinkedIn个人主页/目标页面地址">
  <i class="bi bi-linkedin"></i>
</a>

如果需要在新标签页打开跳转，可以给<a>标签添加target="_blank" rel="noopener noreferrer"属性。

2. 调整图标尺寸 #

Bootstrap Icons本质是字体图标，修改尺寸直接调整字体大小即可，有两种常用方案：

• 使用Bootstrap自带的字体大小工具类，可选fs-1到fs-6，数值越小尺寸越大：

  <i class="bi bi-linkedin fs-3"></i>
  

• 用行内样式自定义尺寸：

  <i class="bi bi-linkedin" style="font-size: 2rem;"></i>
  

3. 修改图标显示颜色 #

同样基于字体图标特性，修改color属性即可调整颜色：

• 使用Bootstrap自带的文本颜色工具类，比如text-primary、text-success等：

  <i class="bi bi-linkedin text-primary"></i>
  

• 自定义颜色（示例为LinkedIn官方品牌蓝）：

  <i class="bi bi-linkedin" style="color: #0077b5;"></i>
  

完整效果示例 #

同时满足跳转、24px尺寸、官方品牌色、hover交互效果：

<!-- 页面结构 -->
<a href="你的LinkedIn页面地址" target="_blank" rel="noopener noreferrer" class="linkedin-icon-wrap">
  <i class="bi bi-linkedin"></i>
</a>

<!-- 配套CSS -->
<style>
.linkedin-icon-wrap .bi-linkedin {
  font-size: 24px;
  color: #0077b5;
  transition: all 0.2s ease;
}
.linkedin-icon-wrap .bi-linkedin:hover {
  color: #005885;
  transform: scale(1.1);
}
</style>

内容的提问来源于stack exchange，提问作者Benas Pekarskis