A mysterious underscore suddenly materializes within Font Awesome icons when used in HTML

Currently, I'm working on the footer section of a webpage using HTML and Bootstrap 5.3.0. I encountered an issue where an underscore appears next to the icons when I add them. I suspect that this is due to the white spaces between the elements, which should ideally create a transparent margin instead of a visible whitespace. 

<footer class="text-center text-lg-start text-white" style="background-color: #1c2331">
    <section class="d-flex justify-content-between p-4" style="background-color: #6351ce">
        <div class="me-5">
            <span>Get connected with us on social networks:</span>
        </div>
                
        <div>
            <a href="" class="text-white me-3"><i class="fab fa-facebook-f"></i></a>
            <a href="" class="text-white me-3"><i class="fab fa-google"></i></a>
            <a href="" class="text-white me-3"><i class="fab fa-instagram"></i></a>
            <a href="" class="text-white me-3"><i class="fab fa-whatsapp"></i></a>
        </div>
    </section>
</footer>

https://i.sstatic.net/5Z2pD.png

Upon attempting to remove the collision boxes, the underscore disappeared, but unfortunately, so did the spacing between the elements. Switching out the icons also did not solve the problem.

My aim is to maintain the current spacing between the elements while ensuring that the underscore at the end of the icons is no longer visible.

htmlcssfont-awesomebootstrap-5

Answer №1

footer a {no text decorations;}

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

Displaying postcode on a category page: A step-by-step guide

I would like to showcase the user input code and present it on the web exactly as entered. <?php #code... ?> Any assistance is greatly appreciated. Please excuse my English. Thank you! ...

javascriptphphtmlcss

Ensuring the width of a div matches the adjacent containers

I need assistance in creating a form that adjusts its width based on the form fields. The form contains both explanatory text and input fields, each enclosed in a div with inline-block set. The outer div (also using inline-block) should not expand beyond ...

htmlcss

Using jQuery to smoothly animate scrolling to the top of a

How can I create a "scroll to top" button at the bottom of my page that smoothly scrolls to the top? Despite using an "animate({scrollTop})" script, the scroll animation is not working and it jumps directly to the top. This is the script I am using: $(&a ...

jqueryhtmlanimation

Breaking the layout using recursive components in VueJS

I am currently facing an issue where I need to dynamically load components. However, when some of these components are loaded, they appear with faulty or missing CSS styles due to a problematic first div element after the template. Removing this DIV manual ...

htmlcssvue.jsvue-component

Select an image from the browser using JavaScript, adjust its size, and then transmit it to the server. Finally, utilize PHP to properly save the image

I am currently tackling the challenge of implementing a classical feature where users can select a file in their browser ("Browse"), have JavaScript resize it to a maximum width/height of 500 pixels, upload it to the server, and then save it to disk using ...

javascriptphpjqueryhtmlfile-upload

Choose either nth-child or nth-of-type within a nested element

Here is the HTML code snippet: <div class="homepage-body"> <a href="#"> <div class="homepage-item"> <div class="homepage-icon"></div> <div class="homepage-text"> Test1 </di ...

htmlcsscss-selectors

Having trouble inserting a hyperlink using the <a> element into a list item (<li>) tag

I have developed a partial view that displays a menu using an unordered list. I am trying to add links to each list item but regardless of whether I use relative paths or absolute paths, the linked pages are not opening and I keep seeing a 404 error in my ...

htmlasp.net-mvc

jquery expanding the width of the final element

Is there a way to increase the width of the last 'th' in a string? I want it to be the current width plus 20px. Here is the code on Fiddle var header="<th id='tblHeader_1' style='width: 80px;'><span>Id</span&g ...

javascriptjqueryhtmlcsstableheader

Having trouble with adding data from an array of objects to an HTML element using jQuery's each method

I am currently facing an issue with looping through an array of objects using $.each in jQuery and trying to append the values to an <li>. Here is the relevant jQuery code: $(".sidebar").empty().append("<div>" + "<h5>Student Info</ ...

javascriptjqueryhtmlarraysjson

Issues with z-index in a multi-column menu using React-Router are causing unexpected behavior

I am currently working on a multi-tier, multi-column menu created using the https://github.com/kontentino/react-multilevel-dropdown library. However, I am facing an issue where the submenu items are appearing under the main items despite several attempts t ...

javascriptcssreactjs

Managing the height of a hero section with TailwindCSS and React.js

Embarking on my first website project using React and Tailwind has been an exciting learning experience. My vision is to showcase a Hero Section prominently at the top, with a Nav bar situated elegantly at the bottom of the screen. To bring this concept ...

htmlcsstailwind-css

Utilizing Vue's v-for directive to manipulate data through custom looping

When I loop through my data using v-for, I find myself unsure of how to display the data with a custom looping method, such as using modulus. I aim to display the data in groups of three items, assigning a different class to every 3 items. The desired st ...

javascripthtmlvue.js

What might be the reason behind Chrome occasionally not updating the page when I resize the browser window?

Currently, I am in the process of developing a responsive design site prototype. Everything is going smoothly except for one peculiar issue that only seems to occur in Chrome. Sometimes, when expanding the window, the browser appears to get stuck between s ...

google-chromecsstwitter-bootstrapresponsive-design

Concealing a div element if the value is null

Here's my code: if ($image1 !=='') { //Insert div here } However, I'm encountering parse errors when I try to place the div within the curly brackets. Is there a specific syntax or format that I am missing...? ...

phpparsinghtmlhide

Slanted background div that adjusts to the screen size

I'm struggling to create a slanted angle div that remains responsive as the screen size changes. Unfortunately, my current layout breaks completely when the screen gets bigger. If you'd like to take a look at what I've been working on so fa ...

css

Firebase authentication encountered an error due to a network request failure

Utilizing firebase Hosting to host my website, I am encountering a persistent error when attempting to login using email/password. This is the JavaScript code that I am using: window.onload = () => initApp(); //Initialize screen function initApp(){ ...

javascripthtmlfirebasefirebase-authentication

Dealing with pesky table cell padding issues in Chrome

Struggling with table cell paddings in Chrome because it appears that if a table cell doesn't have pure text, the padding isn't applied. Here's my code: <table> <tr> <th></th> <th ...

cssgoogle-chromefirefoxhtml-tablepadding

Is there a way to smoothly navigate back to the top of the page after the fragment identifier causes the page to scroll down?

I do not want to disable the functionality of the fragment identifier. My goal is for the page to automatically scroll back to the top after navigating to a specific section. This inquiry pertains to utilizing jQuery's UI tabs. It is crucial to have ...

javascriptjqueryhtml

The jquery datepicker is malfunctioning after switching to another component

My current setup includes the following versions: jQuery: 3.3.1 jQuery UI: 1.12.1 AngularJS: 6 Here's a snippet of my code: <input id="test" type="text" class="form-control" value=""> In my component (component.t ...

javascriptjqueryhtmlcssangularjs

How to Retrieve the Url of a Clicked Element using CSS Property

Is it possible to retrieve the URL when a link is clicked using CSS alone, without relying on JavaScript or jQuery? ...

css