Error with displaying icon font within a box in Internet Explorer

Utilizing Wordpress with the UDesign theme has allowed me to incorporate iconfonts on my website within small blue boxes. You can view these icons in action on this page:

To achieve this look, I had to customize the CSS by following an online tutorial that initially used circles. By adjusting the border radius, I was able to make them into squares with rounded corners. The custom CSS class named .circle-icon has the following properties:


color: #FFF;
font-size: 2.4em;
background: #018ED7 none repeat scroll 0% 0%;
width: 120px;
height: 120px;
text-align: center;
vertical-align: middle;
padding: 6px;
line-height: 2.6em;
margin-right: 10px;
border-radius: 3px;

While these icons display correctly on Chrome and Firefox, there seems to be an issue with Internet Explorer. The bottom of the box is missing, causing the icon to appear at the bottom with the box being too small. I have attempted to tweak the CSS but have been unsuccessful in resolving the issue. Any guidance on what I might be overlooking, or a more efficient method to center these icons within small blue boxes with rounded corners, would be greatly appreciated. Thank you.

csswordpressicons

Answer №1

The <i> tag is being incorrectly used in HTML. Its intended purpose is to represent alternate parts of text, typically displayed in italics, and is meant to be an inline element. While it is sometimes used to display icons, this is considered a semantic misuse.

If you are using the <i> tag to display an icon, you should change its display mode to inline-block. Currently, the size of the icon is determined by the size of the pseudo element :before, the line-height, and padding, which may cause issues with rendering on inline elements. As a result, the specified width and height properties of 120px are not being applied.

To achieve the same appearance as in Chrome/FF while using inline-block, you need to add the following CSS rules:

i {
  display: inline-block;
  width: 53px;
  height: 48px;
}
i:before {
  line-height: 48px; /* vertically center the icon */
}

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

Creating a Modern Tooltip Menu with HTML, CSS, and Bootstrap

My goal is to design a menu that opens to the right, similar to a tooltip. I have experimented with different bootstrap techniques, but I am encountering difficulties in including HTML li elements within the tooltip. https://i.sstatic.net/mAHKS.jpg ...

jquerycsstwitter-bootstrap

The Media Queries in the Wordpress html5blank theme are failing to function properly

While using the html5blank theme to develop a WordPress site, I noticed that my media queries are functioning properly locally. However, when I add them to the WordPress style.css file, they seem to stop working. Even after stripping away all other media q ...

phphtmlcsswordpress

Switching the vertical alignment of grid items in Material UI when the page is collapsed

When the page is collapsed, the Left grid item element moves to the top of the page and the Right grid element is positioned below it. I would like to reverse this behavior so that the Right element appears on top and the Left element below when the page ...

javascriptcssreactjsmaterial-ui

Struggling to implement a vertical scroll bar within a nested div element

Struggling to make a scroll bar appear in the box-content div, even after adding 'overflow-y:auto'. My specific requirements are: The entire layout should adjust according to the browser height. This is why I've set #wrap { ... height: 50 ...

cssoverflow

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

javascripthtmlcsspopup

What are some ways to utilize symbol fonts such as marvosym within a web browser?

Are you looking to use special LaTeX fonts like \Pluto from marvosym in your web development projects? Wondering how to display this symbol with HTML / JavaScript / CSS without relying on an image? You can download the font from This symbol corresp ...

javascripthtmlcssfonts

What's the best way to eliminate letter-spacing only for the final letter of an element using CSS?

Displayed above is the image in question from my HTML page. The text menu is contained within a right-aligned div, with a letter spacing of 1.2em. Is there a way to target this specific element with a pseudo-selector? I'd prefer not to use relative po ...

csscss-selectorsletter-spacing

How come only the individual top, bottom, left and right paddings function correctly while the combined padding does not respond?

Seeking to customize a button using SCSS file that is connected to HTML. This button is part of a flex layout design. The element's size is set at 83.333×16px. The box-sizing property is defined as: box-sizing: border-box; Adding padding with s ...

htmlcsssasspadding

Update: Explored 0 web pages (at a rate of 0 pages per minute) and obtained information from 0 elements (at a rate of

I'm a beginner in Python and Scrapy, currently working on my first project to crawl web security information from a website. However, when I try to run it using cmd, I encounter the message "Crawled 0 pages (at 0 pages/min), scraped 0 items (at 0 item ...

pythoncssscrapyweb-crawler

JavaScript layout: Thymealf

I have a unique thymeleaf template like so: <body> <div id="layout"> <!-- Menu toggle --> <a href="#menu" id="menuLink" class="menu-link"> <!-- Hamburger icon --> <span>& ...

javascriptcsshtmlthymeleaf

Apply the CSS rule specifically for desktop screens, excluding mobile and tablet devices

My website has a logo in the header that appears too small on computer screens. I came across a code snippet that allows me to increase the size of the logo, but I only want this change to be applied on computers and not on mobile or tablet devices. The co ...

htmlcsswordpress

Is it possible to conceal the text specifically inside a textarea, rather than just hiding the entire textarea itself?

Is it possible to have a button next to the textarea that allows you to hide and unhide the text inside the textarea by clicking on it? ...

javascripthtmlcss

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Can someone help me understand this strange behavior I am experiencing across all browsers? <div style="margin-top:5px"> <button translate="clear" ng-click="xyz.clear()" class="btn btn-default"></button> <butt ...

htmlcssangularjs

What is the process for displaying or hiding a large image when clicking on thumbnail images?

How can I toggle the display of a large image by clicking on thumbnails? This is what I am looking for: Check out this JSFiddle version http://jsfiddle.net/jitendravyas/Qhdaz/ If not possible with just CSS, then a jQuery solution is acceptable. Is it o ...

javascriptjquerycssmobile-safari

Ways to define a variable based on a CSS class attribute?

I need help figuring out how to create a variable in my script that is defined by the width attribute of a CSS class. The snippet I have currently doesn't seem to work as expected. var dist = $('.nav').css(width()); The goal of my script i ...

javascriptjquerycss

Troubleshooting problem with presenting real-time data in a Bootstrap Carousel using PHP

Currently, I am in the process of developing a dynamic events calendar to showcase on a website homepage. The information displayed on this calendar is retrieved from a database using PHP. Additionally, I have implemented the Bootstrap framework (version 4 ...

phphtmlcssbootstrap-4

Display the page number when printing using CSS

I am struggling to display the page number at the bottom of my printable document. I followed a source on Stack Overflow, but unfortunately, it did not work for me. My current CSS attempt to achieve this is as follows: body { text-align: justify; } /* ...

htmlcss

li tag style

I need to insert a check mark inside the <li> tag on the right side. How can I do this? The check mark looks like this: For example: http://jsfiddle.net/HpVcy/ ul li{ padding: 3px 10px 3px 10px; background:url(http://img4up.com/up2/730897458613759 ...

htmlcss

Create a rectangular container with text using CSS

Looking to achieve a square box design using CSS with specific dimensions? Want to insert text inside the square and ensure it is horizontally centered within the square? Check out this code snippet: #myid { width: 100px; height: 100px; ...

htmlcss

Adjust the section and aside elements to automatically expand when used within the main tag

Is there a way to ensure that the inner-section and sidebar have a minimum height, while also expanding vertically along with the main tag? Here is an example of the HTML code: <body> <header></header> <main> <s ...

htmlcss