[英]CSS - Align Font Awesome icon with a paragraph of text
我知道这个问题经常被问到,但是我经历了所有可用的答案,但没有一个对我有用。
我在这里有一个可工作的Codepen: https ://codepen.io/anon/pen/WPzGrO
我正在尝试将FA图标对准文本段落的旁边。 因此,图标应位于段落的中间。 当段落分成两行或更多行时,图标将显示在底部,如在代码笔中看到的那样。
vertical-align: middle;
或line-heigh
属性似乎在这里什么也没做。
我怎样才能解决这个问题?
删除vertical-align
, line-height
和height
规则,并添加以下内容:
#menu-list p::after {
…
transform: translateY(-50%);
top: 50%;
}
#menu-list { background: #eee; padding: 50px 100px; } #menu-list p { position: relative; padding-left: 40px; text-align: left; } #menu-list p::after { content: '\\f058'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 0; font-size: 32px; color: #599FF8; width: 32px; transform: translateY(-50%); top: 50%; }
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/> <div id="menu-list"> <p>This is the longest text that will stack into few lines</p> <p>This one will make 2 lines</p> <p>And a single line</p> </div>
更改下面的CSS代码希望能起作用。
#menu-list p::after {
content: '\f058';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
top:0;
font-size: 30px;
line-height:25px;
color: #599FF8;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.