在Bootstrap 4中的菜单项之间添加一个图标

Question

我是初级web开发人员。我在我的项目中使用Bootstrap 4。

我做了这个代码：

.footer-menu a{
color: #2D2D2D;
font-size: 1em;
}
.copyright{
color: #D1D1D1;
font-size: 0.9em;
}

<footer>
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-md-flex flex-row justify-content-between text-center text-md-left footer-menu">
<a href="#" class="d-block"><img src='my logo.jpg'></a>
<a href="#" class="d-block">Oferta</a>
<a href="#" class="d-block">O nas</a>
<a href="#" class="d-block">Kontakt</a>
<a href="#" class="d-block">Cennik</a>
<a href="#" class="d-block">Referencje</a>
<a href="#" class="d-block">Aktualności</a>
</div>
</div>
</div>
</div>
</div>
</footer>

这很好，但我需要在菜单项之间添加图标(oferta，o nas，kontakt，cennik，referencje，aktuanośćI(：https://ibb.co/7RZmSsz(红色圆形(。

我该怎么做？

Answer 1

您可以通过在每个项目之间物理添加一个点div来实现这一点，如下所示：

.footer-menu a{
color: #2D2D2D;
font-size: 1em;
}
.copyright{
color: #D1D1D1;
font-size: 0.9em;
}

.dot:before {
content: "25CF";
color: red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<footer>
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-md-flex flex-row justify-content-between text-center text-md-left footer-menu">
<a href="#" class="d-block"><img src='my logo.jpg'></a>
<a href="#" class="dot"></a>
<a href="#" class="d-block">Oferta</a>
<a href="#" class="dot"></a>
<a href="#" class="d-block">O nas</a>
<a href="#" class="dot"></a>
<a href="#" class="d-block">Kontakt</a>
<a href="#" class="dot"></a>
<a href="#" class="d-block">Cennik</a>
<a href="#" class="dot"></a>
<a href="#" class="d-block">Referencje</a>
<a href="#" class="dot"></a>
<a href="#" class="d-block">Aktualności</a>
</div>
</div>
</div>
</div>
</footer>

或者，一个捷径是将其添加到CSS中.d-block的before中，并篡改padding-right，而不向HTML添加任何内容，如下所示：

.d-block:before {
content: "25CF";
color: red;
padding-right: 1em;
}

但第一种方法将确保点始终均匀地分布在菜单项之间。