The issue of conflicting stylesheets is causing alignment and height discrepancies when using multiple icons

Is there a way to align icons from different stylesheets to have the same height? When attempting to use icons from separate stylesheets, I encountered a height issue where one icon left space at the top and bottom while another appeared correctly aligned. How can I ensure that all icons are aligned with consistent height? The last icon from Font Awesome seems to have some extra bottom space...

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
.footer a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 0px;
  text-decoration: none;
  font-size: 17px;
  width:20%;
  bottom:0;
  margin-bottom:0;
}

.footer a:hover {
  background-color: #ddd;
  color: black;
}

.footer a.active {
  background-color: #2196F3;
  color: white;
}

</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <a href=""><i class="material-icons">home</i></a>
    <a href=""><i class="material-icons">home</i></a>
      <a href=""><i class="material-icons">home</i></a>
        <a href=""><i class="fa fa-tachometer"></i></a>
</div>

</body>
</html>

htmlcssresponsive

Answer №1

Implementing a flex display in your footer could potentially resolve the issue:

    <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        .footer {
          display: flex;
           position: fixed;
           left: 0;
           bottom: 0;
           width: 100%;
           background-color: red;
           color: white;
           text-align: center;
        }
        .footer a {
          /* float: left; */
          display: flex; /* Consider flex layout */
          color: black;
        justify-content: center; /* Alignment of icons */
          padding: 14px 0px;
          text-decoration: none;
          font-size: 17px;
          width:20%;
          bottom:0;
          margin-bottom:0;
        }

        .footer a:hover {
          background-color: #ddd;
          color: black;
        }

        .footer a.active {
          background-color: #2196F3;
          color: white;
        }

        </style>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        </head>
        <body>

        <h2>Fixed/Sticky Footer Example</h2>
        <p>The footer is placed at the bottom of the page.</p>

        <div class="footer">
          <a href=""><i class="material-icons">home</i></a>
            <a href=""><i class="material-icons">home</i></a>
              <a href=""><i class="material-icons">home</i></a>
                <a href=""><i class="fa fa-tachometer"></i></a>
        </div>

        </body>
        </html>

Answer №2

Check out this updated code with line-height and font-size added to the 'i' tag

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
.footer a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  text-decoration: none;
  /*removed padding*/
  width:20%;
  bottom:0;
  margin-bottom:0;
  
}

.footer a:hover {
  background-color: #ddd;
  color: black;
}

.footer a.active {
  background-color: #2196F3;
  color: white;
}
/* added this */
.footer a i{
    font-size: 24px;
    line-height: 50px;
}

</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <a href=""><i class="material-icons">home</i></a>
    <a href=""><i class="material-icons">home</i></a>
      <a href=""><i class="material-icons">home</i></a>
        <a href=""><i class="fa fa-tachometer"></i></a>
</div>

</body>
</html>

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

Retrieve the order in which the class names are displayed within the user interface

In the following code snippet, each div element is assigned a common class name. <div id="category_9" class="list_item" data-item_ids="[38]"</div> <div id="category_2" class="list_item" data-ite ...

javascripthtmlruby-on-railsajax

Property-based Angular Material row grouping in a mat-table is a powerful feature that enhances

Is there a way to organize the data in one row with the same ID? Currently, my data looks like this: Data Set: { "id": "700", "desc": "Tempo", "richiesta": "20220087", "dataElab": &quo ...

javascripthtmlangularangular-material-table

The layout causes issues with responsiveness on the Flask app page

I'm currently in the process of developing a web application and I've implemented a navbar.html file as the layout for each page using the following code: eachpage.html : {% extends 'navbar.html' %} {% block body %} <div class=" ...

htmlcssflask

The <Button> element is incompatible with popups. (HTML, CSS, JS)

I've been struggling with this issue. I used CSS color values to create a smiley face, but when I added a button it messed up the design (adding an unwanted circle around the center of the smiley). I attempted to synchronize the button tag with the po ...

javascripthtmlcss

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

javascriptjqueryhtmlcss

Can a radio button set be designed in two dimensions?

There are three sets of data (dataX, dataY, dataZ) that need to be assigned unique values out of a selection of three options (valueA, valueB, valueC). Each piece of data should be linked to one value and each value should have only one data associated wit ...

htmlformsradio-button

Scroll Bar Menu (User-Controlled)

I'm looking for any libraries out there that can replicate or provide a similar horizontal scrolling menu to that of espn.com's homepage. I'm relatively new to jquery and feeling a bit lost on where to begin. I did some searching on Google, ...

javascriptjquerycss

Tips for Formatting Mandatory Message Input Fields and Text Boxes

I am in the process of creating a contact page for my Reactjs website, but I am unsure how to style the required message that should appear below the input or textarea upon clicking Submit. Can anyone guide me on how to achieve this? Relevant Code <for ...

htmlcssreactjscontact-formrequired-field

Can the text inside a div be styled to resemble h1 without using an actual h1 tag?

Is it feasible to apply the h1 style to all text within a div without utilizing tags? For instance: <div id="title-div" style="h1">My Title</div> Or a potential solution could be: #title-div { style: h1; //Imports all s ...

htmlcss

Utilizing Kendo for Dynamic HTML Element Connection

Currently, I am facing a situation where I have three HTML elements. The first is a textbox labeled shipToAddress, the second is another textbox called deliverToAddress, and finally, there is a checkbox named sameAsShipToAddress. In the background, there ...

javascripthtmlkendo-ui

What is the best way to add a character within a YouTube JSON link?

Fetching json data from a link, the youtube format in the link is http:\/\/www.youtube.com\/watch?v=UVKsd8z6scw. However, I need to add the letter "v" in between this link to display it in an iframe. So, the modified link should appear as ht ...

javascriptjqueryjsonhtml

Can the loaded image from the css sprite be displayed on the screen?

My webpage is designed to load two images from a CSS sprite using the following code: <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div class="arrow low"></div> ...

htmlcssimageprinting

What is the best way to submit your CSS feature suggestions?

Is there a designated platform for submitting CSS feature requests officially? I am interested in proposing the addition of an 'inset' keyword to the text-shadow property for creating inset text shadows. This enhancement seems consistent with th ...

css

Navigate through an image by panning or scrolling within a div container

I have a container div with an image inside. <div id="container"> <img id="image" src ....> </div> I also have a function that retrieves the image by its ID and applies zoom using styles like this: image.style.transform = `scale(${v ...

cssimagezooming

jQuery animation not executing as expected due to transition issues

I'm looking to create a cool effect where the previous quote disappears and a new one appears when I click on a button, all with a smooth transition effect. In my attempt below using jQuery .animate and opacity property, I'm struggling to make i ...

javascriptjqueryhtmlcss

The variable in my scope is not reflecting the changes in the HTML view

Here is my code for handling file attachments in AngularJS: $scope.attachments = []; $scope.uploadFile = function(files){ for(var i=0; i<files.length; i++){ $scope.attachments.push(files[i]); console.log($scope.attachments.length); } } ...

javascripthtmlangularjsangularjs-scope

What is the method for adjusting the right padding of the MUI Autocomplete Input field?

When using MUI, it automatically adds 65px of right padding to the outlined Autocomplete box. However, for my specific needs, I want to change this right padding to 50px. Despite my efforts to override the padding, I have been unsuccessful so far. You can ...

htmlcssmaterial-ui

Ways to fetch additional Product Cards using JSON and a nextPage parameter

I'm facing difficulties in nesting a fetch inside another fetch. I'm not sure if this is the correct approach, but my goal is to utilize Vanilla JavaScript to fetch another JSON from the nextPage URL within the JSON list when the "load more" butt ...

javascripthtmljsonfetch-api

The functionality of the .toggle method is limited to only being effective 1.5

I'm having an issue with making an image popup using the .toggle function in javascript. It seems to work initially, but then only works partially after that. When I click on the image, it opens as expected. However, when I try to close it by clickin ...

javascripthtmlpopup

What is the process of adding background color to text?

Is there a more efficient way to style this text without relying on the span tag? I am looking to add a background color to my text. Code: .subject { color: gold; background: gray; } <h2>Some Subjects</h2> <ol> <li style="bac ...

htmlcss