Как добавить значок справа от номера телефона в HTML?

Question

Я пытаюсь добавить значок справа от номера телефона, как показано ниже:

<a href="tel: +000 000 000 000"><span class="icon flaticon-phone-call-1"> 
</span><b> +000 000 000 000</a>

Я также пытался сделать это так:

<a href="tel: +000 000 000 000"><b> 000 000 000 000 <span class="icon 
flaticon-phone-call-1"></span></a>

, новсе не работает, и значок всегда будет выравниваться по левому краю.

Есть ли какой-то шаг, который я пропустил, чтобы он работал?

Answer 1

Вы можете использовать псевдоэлементы, чтобы сделать это.

.phone-class {
   position: relative;
   display: inline-block;
  }

  .phone-class::before {
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
     -webkit-font-smoothing: antialiased;
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: " \f095";
      position: absolute;
      left: 100%;
      margin-left: 12px;
   }
<a class="phone-class" href="tel: +000 000 000 000"> 

+ 000 000 000 000

Я использовал потрясающий шрифт для изображения телефона, вы можете использовать любую библиотеку значков, просто изменитесемейство шрифтов и содержание.Вы также можете поместить изображение, чтобы добиться того же.

Перед использованием этого решения включите ссылку fontawesome 5 в вашу html-заголовок

Answer 2

Во-первых, у вас есть незакрытый тег <b> в коде, который вызывает у вас проблему.

Вы не включили css, но вот фрагмент выравниваемого по правому краю плоского значка, который, кажется,будь тем, кем хочешь быть.Я позиционировал flaticon, используя background-position css.Я включил font-weight:bold в этот же css, так как тег <b> указал мне, что вы хотите, чтобы текст был жирным.Однако лучше, если вы включите font-weight в свой css вместо добавления дополнительного html-тега.

Надеюсь, это поможет

.icon {
  display: inline-block;
  position: relative;
  border: none;
  outline: none;
  width: auto;
  padding-right: 30px;
  vertical-align: middle;
}

.flaticon-phone-call-1 {
  font-weight:bold;
  background-image: url("https://image.flaticon.com/icons/svg/126/126509.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center right;
}

Tel: <a href="+000 000 000 000"><span class="icon flaticon-phone-call-1">+000 000 000 000</span></a>