The alignment and sizing issues with stacking icons using fontawesome are still unresolved

I have been exploring the use of stacked icons with fontawesome, following a helpful blog post by Dave Gandy.

Although stacking is working well, I am facing an issue aligning a stacked icon with a non-stacked icon (which is fa-5x). It's challenging to get the size and alignment of the stacked icon to match that of the non-stacked icon. You can view the codepen here: http://codepen.io/rfiol/pen/YPQNaG

<i class="fa fa-calendar-o fa-5x"></i> 

<span class="fa-stack fa-3x">
  <i class="fa fa-calendar-o fa-stack-2x"></i>
  <strong class="fa-stack-1x calendar-text">27</strong>
</span>
cssfont-awesome

Answer №1

Check out this solution:

Styling with CSS:

.calendar-text { 
  margin-top: .3em;  
}
.calendar-text { 
  font-size:100%;
}
.col-md-1:nth-child(3) .calendar-text-half { 
  font-size:50%;
}
.col-md-1:nth-child(3) .fa-stack { 
  transform: scale(2,2);
}
.fa-stack {
  font-size:2.5em;
}
.row {
  width:100%;
  height:100px;
  display:block; 
}

See the live demo on CodePen here

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

Trigger a series of functions upon clicking with ReactJS

Need some assistance with an alert message functionality. I have a button labeled Checkout, and when clicked, it should clear the cart and display an alert. At present, the individual functions work as expected - calling emptyCart() works fine, and calling ...

javascripthtmljquerycssreactjs

Utilize Custom Field to incorporate background videos from websites like Youtube or Vimeo into your content

I've been working on implementing a video background for my website. I came up with a custom code to embed URL links from Youtube and Vimeo using "oEmbed". The process is functioning well, but I'm facing some challenges in setting the background ...

phpcsswordpressadvanced-custom-fields

How can I customize the color of Chrome's default date and time picker to a different shade of blue?

Is there a way to customize the color of the blue buttons, text, and date indicator in the native datetime picker for Chrome using CSS? https://i.stack.imgur.com/eZSaE.png ...

htmlcssgoogle-chromedatetimepicker

Toggle the slide when you hit submit

I'm considering the functionality of my code. I am interested in creating a slide toggle effect on a div or span when hovering over an input submit button. Here is an example: https://i.sstatic.net/pBSK8.png What is the best approach to achieve thi ...

jqueryhtmlcss

SVGs do not display on iPhones

Having some issues with my code - specifically, I have an SVG animation that seems to work on all devices except iPhones. I've been struggling to find a solution. Here is the code snippet for the SVG: <div class="contenuto-svg"> <svg vi ...

javascripthtmlcsssvg

Increase the size of clickable hyperlinks in CSS

I am looking to increase the clickable area of my menu links. Currently, only a small part of the links is clickable and I want to know how to expand it. I have seen some CSS tricks using classes, but I also have an active class for these links. Can you ...

jqueryhtmlcsshref

Adjusting the position of a stationary element when the page is unresponsive and scrolling

Managing a large web page with extensive JavaScript functionality can be challenging, especially when dealing with fixed position elements that update based on user scroll behavior. A common issue that arises is the noticeable jumping of these elements whe ...

javascriptjqueryhtmlcss

Position DIVs next to each other

After scouring through countless Stack Overflow threads in search of a solution to my issue, I still can't seem to get it right. Everyone suggests using float: left, float:right, overflow: hidden, display: block, etc., but none of them are working for ...

csshtml

Unable to choose an input form within a CSS div

Just installed a jQuery responsive menu tab but encountering issues with selecting forms to input values. It seems like a CSS problem that I cannot identify. Please assist me in resolving this issue. Below is the HTML code snippet: <div class="contai ...

htmlcss

duplicate styling for individual table cells

I am in need of a span element inside a td tag that I am generating within a table. In order to ensure the span fills the td, I have set it as an inline-block with a width and height of 100%. However, when pressing the delete key in the last cell, it star ...

htmlcss

Creating a single Vuetify expansion panel: A step-by-step guide

Is there a way to modify the Vuetify expansion panel so that only one panel can be open at a time? Currently, all panels can be closed which is causing issues. I would like the last opened panel to remain open. I also want to prevent closing the currently ...

javascripthtmlcssvue.jsvuetify.js

Aligning Divs in a Responsive Browser

In the following illustration, I am facing an issue with my responsive code. I have three sections named square1, 2, and 3, each containing a white div with text on top and an icon positioned absolutely. Everything works fine when the browser width is 920p ...

htmlcss

"Stylish footer design in CSS featuring a sleek overflow scrollbar

Perhaps the most straightforward way to demonstrate this is by providing a direct link to the website where the addition should be made. I am in desperate need of a basic footer that remains fixed at the bottom of the page, regardless of the amount of con ...

htmlcssfooter

single calendar bootstrap-datepicker allowing users to select date ranges

Is it possible to create a single calendar range date picker with Bootstrap instead of using two separate calendars? Currently, I have implemented a solution with two calendars. $('#datepicker').datepicker({ }); <link href="https://cdnjs.cl ...

javascripthtmlcssbootstrap-4date-range

The font from the server is not displaying correctly in the local HTML file

After uploading the ttf font file to the server, I utilized the following CSS code: @font-face { font-family: "fontname"; src: url("http://www.mywebsite.com/Fonts/fontname.ttf"); } body { font-family: "fontname", sans-serif; } Within the loc ...

htmlcss

Turn off the ability for items in Isotope to be set to an absolute

Currently, I am customizing my portfolio and looking to implement my own method for positioning the portfolio items. The Isotope library typically uses absolute positioning with left and top properties to position portfolio elements. Even after trying to o ...

htmlcssjquery-isotope

The appearance of the logout button may differ depending on the web browser being used

I have implemented a straightforward logout button using the following code: <li><a href="http://localhost:8666/web1/profile/mainpage/logout.php" onclick="return confirm('Are you sure to logout?');">Log Out</a>&l ...

javascriptphpjqueryhtmlcss

Are there alternative methods to improve the responsiveness of a column layout?

Check out this codesandbox I created to display my current status. When you change the column-count to three, a significant amount of information becomes hidden because it doesn't scroll. I've attempted using grid and flexbox layouts, but everyt ...

cssreactjsstyled-components

Modifying canvas border colors using AngularJS

Currently, I am in the process of learning AngularJS and have developed a website that includes a canvas element. My main objective is to change the border color after clicking on a checkbox. Here is the code snippet for canvas.html : <!DOCTYPE html&g ...

javascripthtmlcssangularjs

How can I make my div change color when the check-box is selected?

I have a dynamic table in my web application that is populated with data from a database. Each row in the table represents multiple time slots for a specific date. I am working on a feature where the background color of a time block can be changed if a che ...

javascriptjqueryhtmlcss