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

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

        <div >
            <a href="{% url 'notification' %}" style="text-decoration: none;">
                <span >notifications</span>
                {% if unread_notifications %}
                <span >{{unread_notifications}}</span>
                {% endif %}
            </a>
            <a href="{% url 'Profile' user.id %}">
                <span >person</span>
            </a>

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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >
    <div >
        <div >
            <a href="">
                <span >notifications</span>
            </a>
            <a href="">
                <span >person</span>
            </a>
            <a href="">
                <span >logout</span>
            </a>
        </div>
    </div>
</div>

CodePudding user response：

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

    <div >
      <a href="{% url 'notification' %}" style="text-decoration: none;">
        <span >notifications</span>
      </a>
      <a href="{% url 'Profile' user.id %}">
        <span >person</span>
      </a>
      <a href="{% url 'Profile' user.id %}">
        <span >logout</span>
      </a>
    </div>
  </div>
</div>