字体真棒如何

Posted 2023-03-15

【中文标题】字体真棒如何

【英文标题】：Font Awesome How To

【发布时间】：2015-01-23 20:19:46

【问题描述】：

在我的网站标题中，我的电话号码位于代码 a 行中

<b><h2><FONT size="4" COLOR="#FFfff"> CALL US TODAY 512-323-9006</FONT></h2></b>

我要做的是添加字体真棒电话图标<i class="fa fa-phone-square"></i>

当我添加这个电话图标出现在 call us 文本行上方。

我的问题：如何在“呼叫我们”文本之前添加内嵌图标？

提前谢谢你

【问题讨论】：

你把那行代码放在哪里了？高于h2？为什么不放在h2标签里呢？

您是否尝试通过在<i> 标签上设置background-image 来添加图像？那是……一种独特的方式。

@paul.abbott.wa.us FontAwesome 使用 CSS 类来呈现图标。它实际上是一种图标字体，而不是图像。尽管使用background 属性来显示图像实际上是非常通用的（与相关的背景属性相比，它比<img src='' /> 灵活得多）

【参考方案1】：

<h2> 标签是block level element，这意味着它将占据整个宽度，并且不允许任何东西放在它旁边。您可以在 CSS 中使用 inline-block 覆盖此行为：

h2 
  display: inline-block;

inline-block 非常好，因为它允许元素被定位为“内联”，这意味着元素只占用与其内容一样多的宽度，并且它们可以定位在其他元素旁边。同时可以设置margin、padding等块级属性，对inline元素不生效。

inline-block 的示例：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/