CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
trilel
trilel

Reputation: 219

Adding an icon between menu items in Bootstrap 4

I am beginner web developer. I use in my project Bootstrap 4.

I make this code:

.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>

It's work fine, but I need add icons between my menu items (oferta, o nas, kontakt, cennik, referencje, aktualnośći): https://ibb.co/7RZmSsz (red round).

How can I make it?

Upvotes: 0

Views: 130

Answers (1)

John
John

Reputation: 5335

You can do this by physically adding a dot div between every item like this:

.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>

Or a short cut is to just add it to the before of the .d-block in CSS and fiddle with the padding-right and not add anything to the HTML like this:

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

But the first method will ensure that the dot is spaced evenly between the menu items at all times.

Upvotes: 1

Related Questions