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

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 {};
  }
});

Codepen 链接:https://codepen.io/matthew-spire/pen/mNxbyR