Issue with font icons not displaying properly on Firefox

In Firefox, the icon is not displaying in the center, but it works fine in Opera.

body {
    height: 100vh;
    display: grid;
    place-items: center;
}

.link {
    background-color: red;
    padding: 3px;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: initial;
}

i {
    background-color: #fff;
    font-size: 2rem;
}
<head>
    <link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9decfc5c9c8d5e69488978897">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
</head>
    <a href="#" class="link">
        <i class='bx bx-home'></i>
    </a>

Has anyone encountered a similar issue with Firefox?

Here is a screenshot from Opera

And this one shows how it appears in Firefox

===================Edit===================

View code snippet in Firefox

View code snippet in Opera

The version of my Firefox is 95.0.2 (latest version at the moment).

Any suggestions on how to fix this alignment issue in Firefox?

cssfirefoxicons

Answer №1

Unfortunately, I am unable to reproduce the issue you are experiencing. One suggestion I have is to open both browsers side by side, access your developer tools, navigate to elements, and then review the CSS properties to ensure that nothing has been added or omitted in Firefox. You may need to implement some specific styling for Firefox to resolve the issue.

I personally have not had any experience with the use of place-items. Upon checking on caniuse.com, it appears that this property should not be causing any issues for you. However, it would be beneficial to go through all of your HTML/CSS files to confirm that you are not using anything unsupported by the version of Firefox you are currently using.

https://caniuse.com/?search=place-items

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

Slide in the Toggle Effect to Your Navigation Menu

Seeking help with enhancing my jQuery dropdown menu to include a slide down toggle effect similar to this example: http://jsfiddle.net/LaSsr/188/. Any assistance in applying this slide effect to the following JSfiddle would be greatly appreciated. Thank yo ...

javascriptjqueryhtmlcss

Bootstrap's square-shaped columns

I would like to implement a grid of squares for navigation purposes. By squares, I mean that the colored areas should have equal width and height. Currently, I have achieved this using JavaScript, but I am interested in a CSS-only solution. My project is ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the process for dividing a form into two separate columns?

I am working on a form that sends input to a PHP script. I want to reorganize the form so that the second section (Person 2) appears in a column to the right of the first section (Person 1), instead of below it. <link rel="stylesheet" href="test.css" ...

htmlcssforms

Can a layer be sliced to create a text-shaped cutout?

I want to achieve a cool text effect where the background is visible through the letters. I have explored options with background images and colors, but I haven't found any examples where the underlying layer is revealed. Is this even possible? Imag ...

javascriptjquerycsshtml

Executing a jQuery script on various elements of identical types containing different content (sizes)

I am currently working on a jQuery script that will center my images based on the text block next to them. Since I am using foundation 5, I have to use a jQuery script to override the CSS instead of using vertical-align: middle. The script looks like thi ...

javascriptjqueryhtmlcsszurb-foundation

Having some trouble integrating CSS with JavaFx; encountering an error

Can anyone help me with using CSS in JavaFx? I'm encountering an error while trying to add a CSS file (style.css) to my fxml file through stylesheets. The error message I'm getting is: com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged W ...

javacss

Using JQuery, eliminate the transition effect from a child CSS class

I am facing an issue with transitioning an ID that has a child class. My goal is to transition the ID only, without affecting the class within it. Despite going through CSS and jQuery documentation, I have been unable to achieve this. The transitions are c ...

javascriptjquerycss

Troubleshooting: CSS property "background-color" malfunctioning

Recently, I've been attempting to implement CSS variables into a simple code but have encountered issues. Despite double-checking the information on how to properly use variables, I can't seem to pinpoint my mistake. Could it be that I am doing s ...

htmlcss

Tips for creating a seamless Bootstrap collapse effect

I have noticed a slight flicker in the content collapse when using this code. Is there a way to make it collapse more smoothly? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script ...

javascripthtmlcsstwitter-bootstrap

Is there a way to ensure that the border of a textarea matches the border of a text input?

My goal is to make the textarea fields in my form have the same appearance as the text input fields, regardless of the browser being used. I am interested in achieving this without imposing a customized style, but instead by leveraging the standard style w ...

htmlcss

Setting the height of a box-inner div to full height in Bootstrap 4: A guide

Assistance Needed: I have encountered an issue with my design while using bootstrap-4. The box-inner div works perfectly on desktop, adjusting its height according to the content entered. However, on a real iPad, the columns are not of equal height as sho ...

htmlcssbootstrap-4

What causes a slow disappearance of both the form element and its child elements when the visibility attribute is set to hidden on the

Have you ever noticed that the child elements of an element form hide slowly when using visibility:hidden, but hide quickly when using display:none? This slow hiding can negatively impact user experience. I tried to find information on this issue, but eve ...

cssangularforms

"Is it possible to include a button for horizontal scrolling in the table

I have a bootstrap table with overflowing set to auto within its container, along with a locked first column. While a horizontal scroll bar allows for viewing additional data, I am looking to incorporate buttons for navigation as well. Users should have th ...

javascripthtmlcssbootstrap-4

Utilize the inherited background color for a linear-gradient effect

Here is the code snippet I am working with: <label className={classes.trigger} htmlFor={uniqueId} ref={labelRef} style={{ background: val, borderColor: val }} /> This is the corresponding CSS: .trigger { display: block; posit ...

javascripthtmlcssreactjssass

CSS table row border displaying irregularly in Chrome and Internet Explorer

I recently created a basic table with bottom row borders. Surprisingly, the borders display perfectly in Firefox but only partially in Chrome and IE 10: <div style="display:table; border-collapse: collapse; width: 100%"> <div style="display:table ...

htmlcssbordercss-tables

Instructions for placing the navigation links below the navigation brand

Could you please advise me on how to center the navigation links below the brand logo? I am new to coding and just starting out. Here is a link to a page that demonstrates what I am trying to achieve: In this example, the brand name is "a fork and a pe ...

htmlcssbootstrap-4

Stuck with the Same Theme in the AppBar of material-UI?

Currently, I am attempting to modify the theme of a material-UI AppBar by utilizing states. Strangely enough, although the icons are changing, the theme itself is not. If you'd like to take a look at the code, you can find it here: https://codesandbo ...

javascriptcssreactjsmaterial-ui

CSS3 Marquee Effect - puzzled

After trying numerous solutions for the marquee effect, I find myself at a dead end. Even webkit examples have failed me, as the demos don't seem to work either. My browser of choice is Chrome, but my website needs to function properly in both Chrome ...

htmlcssvalidationcss-animationsmarquee

Tips for creating a square HTML element

Looking to customize my react calendar with square tiles. Currently, the width is determined by the overall calendar width, but I want the height to match. https://i.sstatic.net/3vVrq.png Sample HTML: <button class="react-calendar__tile react-cal ...

cssreactjsreact-calendar

UI binder is having difficulty resolving CSS

After creating a search panel for my application using UI binder, I noticed that the desired behavior is not being achieved. Ui.xml <g:HTMLPanel> <c:SimpleContainer> <c:InfoContainerHeader text="{labels.searchFilter}" /> ...

javahtmlcssgwt