How to vertically align icon font
retroriff
I am trying to vertically align font icons. I have tried vertical-align: middle but I always get a little align difference. The following example has 2 different ways to use the icons and they are not aligned correctly.
div {
font-size: 50px;
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
background: yellow;
}
.cart {
margin-top: 20px;
}
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;
vertical-align: middle;
text-transform: none;
}<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">
<div>
<span class="icon icon-shopping-cart"></span> Shopping Cart
</div>
<div class="cart">
Shopping Cart
</div>
mushroom chan
You can try vertical-align: text-bottom or vertical-align: text-top, depending on which one you feel is more vertically centered.
For your shopping cart icon, it seems text-top is most vertically centered.
Example at: https://jsfiddle.net/p3g189bg/
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: How to avoid UICollectionView repeating cells?
- Next: Javascript if statement issue, and how one can verify a color in jquery
Related
Related Related
- 1
How to vertically align text with icon font?
- 2
vertically align font awesome icon in td with variable height
- 3
Bootstrap 4 align Font Awesome icon horizontally and vertically
- 4
How to vertically align a 'span' in a 'div' with icon present?
- 5
How to vertically align an icon inside a span
- 6
How to position font awesome icon vertically
- 7
Align vertically Icon and TextInput
- 8
How to vertically align an icon next to text in Bootstrap 3
- 9
How to center align font awesome icons vertically in a circle div?
- 10
how to vertically align the 2 different font sizes inside a single <p>
- 11
how to vertically align the 2 different font sizes inside a single <p>
- 12
How to vertically align font-awesome icons in a button?
- 13
How to center text vertically with a large font-awesome icon?
- 14
how can I align font awesome icon in bootstrap button?
- 15
how can I align font awesome icon in bootstrap button?
- 16
How to align <iframe> vertically?
- 17
How to align buttons vertically
- 18
How to vertically align glyph?
- 19
How to vertically align image
- 20
how to vertically align this div?
- 21
How to align buttons vertically
- 22
How to vertically align glyph?
- 23
How to align text vertically?
- 24
Align icon vertically to the center of the first line of text
- 25
Vertically align text with different font sizes
- 26
Vertically align 2 different font sizes to the bottom
- 27
Align two labels vertically with different font size
- 28
Vertically centering Font Awesome icon inside nav
- 29
Vertically centering font awesome icon with dynamic height?
Comments