Шрифт Awesome Как сделать

Question

В заголовке моего сайта у меня есть номер телефона в строке кода

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

Что я пытаюсь сделать, это добавить шрифт значок телефона удивительным <i class="fa fa-phone-square"></i>

Когда я добавляю это, значок телефона появляется над строкой "Позвоните нам".

Мой вопрос: как мне добавить иконку, встроенную непосредственно перед текстом "Позвоните нам"?

заранее спасибо

Answer 1

<h2> tag - это элемент уровня блока, что означает, что он будет занимать всю ширину и не позволит расположить что-либо рядом с ним. Вы можете переписать это поведение в 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/