What could be causing one of my FontAwesome icons to appear larger than the other two in my inline-block list?

I am trying to use three different FontAwesome icons in an inline-block list. Initially, I set the font size to 24px/1 and then modified it to 32px/1 for all three. However, only the first icon seems to have resized properly, while the others are misaligned and overlapping the text below. Despite several attempts to revert them back to their original size, clearing cache, history, and testing in Chrome, Firefox, and Safari, the issue persists as shown in the screen capture. Unbalanced icons

How can I fix this so that they are all the same size and aligned correctly like the last two icons?

Here is the HTML code.

<div class="sidebar-social-navigation">
<ul class="social-icons">
<li class="element facebook"><a href="https://www.facebook.com/accessible.techcomm/"><span class="facebook" aria-labelledby="Facebook"></span></a><br /><a href="https://www.facebook.com/accessible.techcomm/">Facebook</a></li>

<li class="element twitter"><a href="https://twitter.com/AccessTechcomm"><span class="twitter" aria-labelledby="Twitter"></span></a><br /><a href="https://twitter.com/AccessTechcomm">Twitter</a></li>

<li class="element rss"><a href="https://accessible-techcomm.org/feed/"><span class="rss" aria-labelledby="RSS"></span></a><br /><a href="https://accessible-techcomm.org/feed/">RSS</a></li>
</ul>
</div>

And here is the CSS provided for these icons.

.sidebar-social-navigation {
    margin: 0 0 5px 0;
    padding: 0;
}

/* Rest of the CSS styling */

UPDATE:

cssfont-awesomefont-size

Answer №1

The existing code is functional, but there is room for improvement in terms of ensuring DRY principles (don't repeat yourself). For example, you can streamline the use of properties for ::before by consolidating them instead of repeating them three times.

This adjustment could potentially resolve any issues and ensure that changes to size apply consistently across all elements simultaneously.

.sidebar-social-navigation {
  margin: 0 0 5px 0;
  padding: 0;
}

.social-icons {
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-icons .element {
  position: relative;
  display: inline-block;
}

/* UPDATED CODE */
.social-icons .element a::before {
  content: "";
  font: normal 16px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: top;
  color: #2222ac;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.social-icons .facebook a::before {
  content: '\f082';
}

.social-icons .twitter a::before {
  content: '\f081';
}

.social-icons .rss a::before {
  content: '\f09e';
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sidebar-social-navigation">
  <ul class="social-icons">
    <li class="element facebook"><a href="https://www.facebook.com/accessible.techcomm/"><span class="facebook" aria-labelledby="Facebook"></span></a><br /><a href="https://www.facebook.com/accessible.techcomm/">Facebook</a></li>

    <li class="element twitter"><a href="https://twitter.com/AccessTechcomm"><span class="twitter" aria-labelledby="Twitter"></span></a><br /><a href="https://twitter.com/AccessTechcomm">Twitter</a></li>

    <li class="element rss"><a href="https://accessible-techcomm.org/feed/"><span class="rss" aria-labelledby="RSS"></span></a><br /><a href="https://accessible-techcomm.org/feed/">RSS</a></li>
  </ul>
</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

Encasing extracted content in <p> tags

On my Wordpress Site, I have extracted images and text separately to use in different sections of my single.php file. Utilizing HTML within the Bootstrap 3 framework: <div class="row"> <div class="col-md-12"> <?php ...

javascriptphpjqueryhtmlcss

What is the best way to adjust viewport settings for child components, ensuring the container size is set to 100vw/100vh for all children

Within my project, I have connected the react-static repository with the react repository using yarn link. "react": "^16.13.1" "react-static": "^6.0.18" I am importing various components from the react-static reposi ...

javascripthtmlcssreactjsviewport-units

Guide to extracting table data (including merged cells) with identical class names using Python and Selenium

Based on the image provided, The data for 2002, December, and 1,262.516 can be identified as follows: 2002 is represented by td[1], December by td[2], and 1,262.516 by td[3]. In the row immediately following, let's assume that 2002 Q4 corresponds to ...

pythonhtmlcssselenium

designing the border at the bottom of the existing menu selection

I am trying to enhance the look of my current-menu-item div by adding a border at the bottom. It seems simple enough to achieve this by simply including the border in the div. However, I'm facing an issue with the width and position of the border. Ide ...

phpwordpresscss

What is the best way to showcase several divs, along with their respective child elements, in an inline format?

I am struggling to get 4 div sections to display side by side by using the following CSS for the parent div: .parent { display: inline; } <div class="parent"> <div class="child"> <ul> <li>t ...

htmlcss

What causes a block element to not stretch to match the width of its parent when it is in a fixed position?

I am currently developing a fixed horizontal navigation bar that spans the entire width of the screen. However, when I attempt to make its position fixed, the unordered list element only occupies the width required to contain its content. Considering that ...

htmlcss

The class "slick" in <col class="slick"> does not add any styling or effects

My interpretation of the col element is that it can be used to assign a class to all elements in a column of a table. However, I am experiencing difficulties with this approach. While I am able to apply the class to individual td elements, I am looking for ...

htmlcsshtml-tablecol

Do not apply tailwindcss styles to Material-UI

I've been struggling to apply styling from tailwindcss to my MUI button. My setup includes babel and webpack, with the npm run dev script as "webpack --mode development --watch". tailwind.css module.exports = { content: ["./src/**/*.{js, jsx, t ...

javascriptcssreactjsmaterial-uitailwind-css

When the height of the first div increases, make sure the second div gets pushed down

Currently, I am working on creating accordion buttons that are wrapped within a div container. The goal is to keep them in a grid layout with 2 columns like the image below: https://i.sstatic.net/SmfYx.png However, when one of the accordion buttons is op ...

csssass

Annoying Gap Found Between <header> and <nav>

I am encountering an issue with the spacing between the <header> and <nav> in my HTML5 code. Despite trying to adjust the padding, there remains approximately 5 pixels of empty space that I cannot seem to remove. If anyone could provide insigh ...

csshtmlwhitespacesemantic-markup

Tips for creating slanted div borders

I am working on a project where I have 4 divs serving as background colors. I want to create slanted bottom borders similar to the design in this image: Below is the code I currently have: <html> <head> <style> html, body { height: 200% ...

htmlcss

Having trouble displaying the :before element on a ReactiveForms input

Is anyone else experiencing difficulty displaying a FormControl on a form to hold a telephone country code prefix with a plus sign always visible in the left-padding area? I attempted to use a :before element on the input, but even after inspecting in DevT ...

cssformsangular

Safari and Chrome render flexbox layouts differently

I am encountering a frustrating issue with my font "History Maps" centering within its title box on Chrome using flexbox, but failing to do so in the Safari browser. For reference: Below is the HTML and CSS code in question: /* Parent elements */ ...

htmlcssgoogle-chromesafari

Choosing specific Nth-of-type elements using selenium

Trying to use By.cssSelector to capture the nth dom element with class c3 in a structure similar to this: <div class="c1"> <div class="c2"> <div class="c3">...</div> </div> </di ...

javacssselenium

Locate HTML attribute values with the help of BeautifulSoup

Trying to extract data from HTML using BeautifulSoup has proven to be more challenging than expected. Specifically, I am struggling with utilizing the .find() function correctly in this scenario. Take a look at the HTML snippet below: <div class="a ...

pythonhtmlcssbeautifulsoup

What is the best way to create a smoother transition for changing the hover color?

I have created a demo where an image changes color on hover, transitioning from gray to various colors. However, I find that the color change effect is too abrupt and I would like it to be more smooth, with a gradual transition and ease-in/ease-out effec ...

javascripthtmlcssimage

Ways to automatically scroll through an associated HTML table

Managing two related tables that display the same information in different languages can be a tricky task. In my case, when I use the Key down or Key up functions, only one table scrolls while the other remains stationary. How can I synchronize their scrol ...

javascriptjquerycsshtml

Bootstrap 4 radio buttons are not aligning properly with the padding

There seems to be an issue with the alignment of Bootstrap 4 custom radio buttons and my left padding. Here is a snippet: https://i.sstatic.net/vWTNo.png This is part of the code for displaying an item <div class="p-4"> <ul class="d-flex ...

htmlcssbootstrap-4radio-button

Unable to align span vertically using font-style "Luckiest Guy" in CSS

I have encountered an issue with vertically centering a span using the font-style "Luckiest Guy". https://i.sstatic.net/Lz8o3.png I attempted to use display: flex;align-items: center; on the span, but it did not work. App.vue <template> <div ...

javascripthtmlcssvue.jsflexbox

"Step-by-step guide for incorporating a right-to-left (RTL) Bootstrap

Is there a way to make my bootstrap navbar right-to-left (RTL)? I want the logo to be on the right and the links to flow from right to left. I've tried various tricks but none of them seem to work. Here's the code I currently have: <nav class ...

csstwitter-bootstrapbootstrap-4navbar