Question

因此，我在尝试使用导航图标样式化导航栏时遇到了麻烦。我正在尝试实现类似于https://codepen.io/matthew-spire/pen/GVQvJg的功能，但是我不知道该怎么做。

现在我只有：

<!-- Social Media Navigation -->
    <b-navbar type="dark" variant="dark" class="justify-content-center">
      <b-list-group horizontal>
        <b-list-group-item href="#" target="_blank"><font-awesome :icon="['fab', 'instagram']" size="2x"/></b-list-group-item>
        <b-list-group-item href="#" target="_blank"><font-awesome :icon="['fab', 'facebook-f']" size="2x"/></b-list-group-item>
        <b-list-group-item href="#" target="_blank"><font-awesome :icon="['fab', 'twitter']" size="2x"/></b-list-group-item>
        <b-list-group-item href="#" target="_blank"><font-awesome :icon="['fab', 'youtube']" size="2x"/></b-list-group-item>
      </b-list-group>
    </b-navbar>

有什么建议或地方吗？我已经进行了修改，并尝试访问我想要的内容并对其进行相应的样式设置，但距离我想要达到的结果还差得远。

Answer 1

这是一个有效的解决方案，在我的帮助下。比我预期的工作还要多。

HTML：

<div id="app">
  <b-navbar toggleable="lg" type="dark" variant="dark" class="justify-content-center">

    <!-- Right aligned nav items -->
    <b-navbar-nav>
      <div class="instagram-circle circle text-center">
        <b-link class="social-icon" href="#"><i class="fab fa-instagram fa-lg"></i></b-link>
      </div>

      <div class="facebook-circle circle text-center">
        <b-link class="social-icon" href="#"><i class="fab fa-facebook fa-lg"></i></b-link>
      </div>

      <div class="twitter-circle circle text-center">
        <b-link class="social-icon" href="#"><i class="fab fa-twitter fa-lg"></i></b-link>
      </div>

      <div class="youtube-circle circle text-center">
        <b-link class="social-icon" href="#"><i class="fab fa-youtube fa-lg"></i></b-link>
      </div>

    </b-navbar-nav>
  </b-navbar>
</div>

CSS：

.social-icon {
  color: white;
  font-size: 25px;
  margin: 5px 5px;
  text-align: center;
  text-decoration: none;
}

.social-icon:hover {
  color: white;
  text-decoration: none;
}

.facebook-circle:hover {
  background: #4060a5;
}

.twitter-circle:hover {
  background: #00abe3;
}

.instagram-circle:hover {
  background: #375989;
}

.youtube-circle:hover {
  background: #ff1f25 !important;
}

.circle {
  background-color: grey;
  border-radius: 50%;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  padding: 15px;
}

JS：

new Vue({
  el: "#app",
  data() {
    return {};
  }
});

指向密码笔的链接：https://codepen.io/matthew-spire/pen/mNxbyR

Answer 2

使用b-navbar-nav和b-nav-item组件（而不是导航栏不支持的b-list-group组件）来生成社交图标链接，然后使用Vue-加载程序的深度选择器，可根据需要设置图标的样式。

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

b-list-group和b-list-group-item的BootstrapVue样式

2 个答案: