What is the best way to enlarge icons and space them out evenly along a single line?

Would anyone be able to assist me in increasing the size of and separating these three icons that are close to each other using CSS3 in a single line? I am utilizing 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>
cssbootstrap-5

Answer №1

To adjust the distances between items, utilize the gap: gapValue CSS property. This will allow you to set the gap between flex-items. Additionally, change the <a> display property to block.

When it comes to the icon sizes, as you are using a font, you can modify their size using font-size: yourDesiredValue.

.row .col {
  gap: 20px; /* Adjust the value as per your preference */
}

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050253e203e22">[email protected]</a>/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>

Answer №2

Adjust the size of the icons with the font-size property. Create spacing between them using margin (for example).

Pro tip: remove the underline near the icons by adding text-decoration: none;

It's recommended to utilize a parent class like ".my-toolbar" to define the style for these 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the change listener be used to retrieve the selected option's number in a form-control?

This particular cell renderer is custom-made: drop-down-cell-renderer.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-drop-down-cell-renderer', templateUrl: './drop-down-cell-r ...

angularhtmlcssbootstrap-4

Display a specific element only if another element exceeds a specified height

A snippet of HTML code is given below: <span class="day-number">{{day-number}}</span> <div class="event-box"> <div class="event-container"> </div> <div class="more-events">more ...</div> </div> The .e ...

javascriptjqueryhtmlcss

Converting HTML to PDF using JavaScript

My goal is to create an HTML page and then print and download it locally as a PDF. However, when I try to generate the PDF, it cuts off the last 3 to 4 lines of the page. I want to create multiple PDF pages in A4 size with the same styling as the HTML pa ...

javascripthtmljquerycss

Unnecessary additional spacing caused by inline blocks in Firefox

On my webpage, I have organized my div elements using inline-block properties. Strangely, Firefox is adding extra spacing between two specific divs, while Safari and Chrome display the design consistently. Check out this example here. #main { display ...

cssfirefox

Utilize the v-for second argument in VueJS 2 to showcase the index and index+1

For a VueJS 2 project, I am tasked with enhancing the display of the first and second elements in an array by making them stand out from the rest. To achieve this, I am utilizing the v-for syntax to iterate over a child component within a parent component. ...

javascripthtmlcssvuejs2v-for

What is causing React Js to fail loading css when switching from anchor tag to link tag?

I am learning React and experimenting with creating a basic static website using HTML templates in version ^18.2.0 of React JS. Everything seems to be functioning correctly, however, I have encountered an issue with page refresh. Specifically, when I repla ...

javascripthtmlcssreactjs

Move your cursor over one container to see the impact on another

My goal is to create a hover effect on a box that triggers another div with easing effects. Below, you'll see that the .images{} class has a 0s infinite scroll initially, but when the .box:hover > .images{} selector is activated, it changes to a 10 ...

cssanimationhover

JavaScript code for opening and closing buttons

I created a button that successfully opens, but I am struggling to figure out how to close it. Can someone assist me with this? Additionally, I have one more query: How can I remove the border when the button is clicked? document.getElementById("arrowb ...

javascripthtmlcss

Adjust the background of the page at regular intervals

I currently have: <script type='text/javascript'> var imageID=0; function changeimage(every_seconds){ //change the image if(!imageID){ document.getByTagName("body").src="icwXI.jpg"; imageID++; } else{if(imageID==1){ document.ge ...

javascripthtmlcss

Styling a div element in React

Just dipping my toes into the world of styling here, so bear with me. I'm currently working on a React app and attempting to bring an image from a file using the following code: import cup from './img/cup.png' My goal is to style it in co ...

cssreactjs

Issue with jQuery select box (roblaplaca) and its custom scroll bar functionality not functioning as expected

Recently, I implemented the custom select box script from . This script allows for two select boxes, where the second one updates dynamically using AJAX when there is a change in the first select box. Below is a sample of the HTML code: <option>One& ...

javascriptjqueryhtmlcssajax

Creating a flexible Tic Tac Toe board using only HTML and CSS without any JavaScript

I'm currently tackling an HTML layout challenge that involves creating a responsive Tic Tac Toe board using only HTML and CSS, without any JavaScript. This is how I have structured the layout of the board: <div class="board"> <div class= ...

htmlcss

Creating a tree with branches using divs: a comprehensive guide

I have been tasked with designing a tree structure for a project that will visually represent the results of a quiz. The tree needs to have branches on both sides, featuring 4 main branches, each with 5 smaller branches extending from them. Additionally, I ...

htmlcss

Ways to display or conceal various divs by employing an if/else statement?

I am aiming to conditionally display various divs based on certain criteria: Show the "x" div if it's not already visible Display the "y" div only if the "x" div is already being displayed Show the "z" div only if both the "x" and "y" divs are alrea ...

javascripthtmlcss

Using Node.js to Send Emails via API

I've been grappling with an issue for over a week while trying to develop a web application that sends welcome emails to new subscribers. Despite my API code working perfectly, I cannot seem to get any output on the console indicating success or failu ...

javascripthtmlcssnode.jspostmark

Steps for aligning an image to the right using Bootstrap Vue

I'm currently learning Bootstrap Vue and I'm trying to align an image on the right using a b-card header. The challenge I'm facing is that when I add the image, it disrupts the perfect size of the template header, causing the image to show a ...

cssvue.jsbootstrap-4bootstrap-vue

Troubleshooting Problem with Text Labels on Bootstrap Progress Bars

I am attempting to utilize a Bootstrap progress bar to display text on it. The progress bar itself functions properly, but the text is not centered in the entire progress bar; rather, it is centered within the gray area. As the progress bar fills up, the t ...

javascripttwitter-bootstrapbootstrap-5

The same size background effect

I am looking to create a list of names that are all the same size. How can I achieve this using Bootstrap? <ul class="list-unstyled"> <li> <a class="btn btn-xs btn-warning"> <span >Loren ipsum</span> </a> ...

csstwitter-bootstrap-3

Designing a visually appealing widget in a jQuery UI theme by floating two elements neatly inside

My code looks like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testing PasteHTML.co ...

cssjquery-ui

Is there a way to modify the color of the horizontal line within react-native-otp-inputs in the React Native platform?

Is there a way to customize the color of the horizontal line in react-native-otp-inputs for react native? I used react-native-otp-inputs to capture user OTP input, but now I want to change the color of the default black horizontal line to white. You can re ...

javascriptcssreactjsreact-native