如何在Bootstrap导航栏元素上方添加社交媒体图标？

没问题，我帮你搞定这个需求！要在Bootstrap导航栏里添加Facebook、Instagram这些社交图标，咱们用Font Awesome就很方便——它和Bootstrap兼容性拉满，图标也全。下面是具体的修改步骤和代码：

第一步：引入Font Awesome图标库 #

首先得在你的HTML页面的<head>标签里加上Font Awesome的CDN链接，这样才能使用它的图标：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

第二步：修改导航栏HTML结构 #

我们可以在现有导航项（INICIO、NOSOTROS这些）的上方添加一个社交图标栏，保持和Bootstrap导航栏的样式统一。下面是修改后的完整导航栏代码：

<nav class="navbar fixed-top navbar-expand-lg navbar-light navbar-custom">
  <a class="navbar-brand" href="http://localhost/wp/">
    <img src="http://localhost/wp/wp-content/uploads/2019/05/cropped-logo-1.png">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto"></ul>
    
    <!-- 新增的社交图标栏 -->
    <ul class="navbar-nav mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link" href="#" aria-label="Facebook">
          <i class="fab fa-facebook-f"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" aria-label="Instagram">
          <i class="fab fa-instagram"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" aria-label="YouTube">
          <i class="fab fa-youtube"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" aria-label="WhatsApp">
          <i class="fab fa-whatsapp"></i>
        </a>
      </li>
    </ul>

    <!-- 原来的主菜单 -->
    <ul id="menu-menu-principal" class="navbar-nav">
      <li id="menu-item-10" class="nav-item active"><a title="INICIO" class=" nav-link" href="#">INICIO</a></li>
      <li id="menu-item-12" class="nav-item"><a title="NOSOTROS" class=" nav-link" href="#">NOSOTROS</a></li>
      <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19 nav-item"><a title="BLOG" class=" nav-link" href="#">BLOG</a></li>
      <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20 nav-item"><a title="CONTACTO" class=" nav-link" href="#">CONTACTO</a></li>
    </ul>
  </div>
</nav>

第三步：自定义图标样式（可选） #

如果想调整图标的颜色、大小或者hover效果，可以在<head>里加一段自定义CSS：

.navbar-custom .nav-link i {
  font-size: 1.2rem; /* 调整图标大小 */
  color: #333; /* 默认颜色 */
}

.navbar-custom .nav-link:hover i {
  color: #007bff; /* hover时的颜色，这里用Bootstrap的primary色 */
}

.navbar-custom .navbar-nav .nav-item {
  margin-left: 1rem; /* 图标之间的间距 */
}

一些小说明： #

• 把代码里的#替换成你实际的社交平台链接，比如Facebook的链接就换成你的主页地址。
• mb-2 mb-lg-0是Bootstrap的响应式间距类：在屏幕小于lg（992px）时，社交图标底部会有间距，避免和主菜单挤在一起；大屏幕上则没有这个间距。
• aria-label是为了无障碍访问，让屏幕阅读器能识别图标的用途。

这样修改后，社交图标就会出现在主导航项的上方，而且和Bootstrap的样式完美适配啦！

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