[英]How to vertically align text with icon font pseudo element
I am trying to vertically align font icons. 我正在尝试垂直对齐字体图标。 I have tried "vertical-align: middle" but I always get a little align difference. 我已经尝试过“ vertical-align:middle”,但是我总是会得到一点对齐差异。 The following example has 2 different ways to use the icons and they are not aligned correctly. 下面的示例有两种使用图标的不同方式,它们的对齐方式不正确。
An example on Jsfiddle: https://jsfiddle.net/crphowLg/7/ Jsfiddle上的示例: https ://jsfiddle.net/crphowLg/7/
<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">
<style>
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;
}
</style>
<div>
<span class="icon icon-shopping-cart"></span>
Shopping Cart
</div>
<div class="cart">
Shopping Cart
</div>
Thank you. 谢谢。
I think it difference size of font. 我认为这是字体大小的差异。 Because you using fanatic-icons font for it. 因为您使用的是fanatic-icons字体。 So i think you try add padding for cart::before 所以我认为您尝试为cart :: before添加填充
display: inline;
font-family: "fanatic-icons" !important;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
padding-bottom: 15px; //added it
text-transform: none !important;
vertical-align: middle;
goodluck ! 祝好运 !
Update your css like below. 如下更新您的CSS。 I have added a class to your HTML as well. 我也为您的HTML添加了一个类。 This can be achieved by using display:inline-block; 这可以通过使用display:inline-block;来实现。 and float properties in css 和浮动属性的CSS
CSS CSS
div {
font-size: 50px;
font-family: helvetica,arial,sans-serif;
text-transform: uppercase;
background: yellow;
}
.cart {
display :inline-block;
width : 50%;
}
.cart1{
display: inline-block;
width:50%;
float:right;
}
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;
text-transform: none;
}
HTML: HTML:
<div class ="cart1">
<span class="icon icon-shopping-cart"></span>
Cart
</div>
<div class="cart">
Cart
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.