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

Dan Gargajiya 0
Viewed 17

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>
bootstrap-5 css
2 Answers

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>

Mosia Thabo0

Size of them can be set using font-size. Space them using margin (for example).

Tip: to get rid of the underline near the icons, use text-decoration: none;

Finally, you should use a parent class for those ".my-toolbar" to encapsulate the style of those specific links/icons.

a {
  text-decoration: none;
}

span.material-icons {
  font-size: 4em;
  margin-right: 120px;
}
<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>
      </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>

IT goldman0
Related