Home How can i increase the size of an icon and separate them from one another in a single line

Questions

How can i increase the size of an icon and separate them from one another in a single line

September 17, 2022

these 3 icon is close to each other, I want to increase the size of these 3 icon, and separate them from each other. is there anybody who can show me how to do this in a single line using css3?, I’m using Bootstrap5 and Google Icons.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

html code:

<div class="container">
    <div class="row">

        <div class="col d-flex justify-content-center">
            <a href="{% url 'notification' %}" style="text-decoration: none;">
                <span class="material-icons">notifications</span>
                {% if unread_notifications %}
                <span class="badge bg-secondary">{{unread_notifications}}</span>
                {% endif %}
            </a>
            <a href="{% url 'Profile' user.id %}">
                <span class="material-icons">person</span>
            </a>

            <a href="{% url 'Profile' user.id %}">
                <span class="material-icons">logout</span>
            </a>
        </div>
    </div>
</div>

>Solution :

For the Item distances you can achieve this using gap: gapValue css property. It sets the gap between flex-items. Just make your <a> display property to block as well.

For the Icon sizes, since you’re using a font, you can change their size using font-size: yourDesiredValue

.row .col {
  gap: 20px; /* Change this to your desired space */
}

.row .col a{
  display: block;
}

.row .col .material-icons{
  font-size: 28px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
            <a href="">
                <span class="material-icons">notifications</span>
            </a>
            <a href="">
                <span class="material-icons">person</span>
            </a>
            <a href="">
                <span class="material-icons">logout</span>
            </a>
        </div>
    </div>
</div>