Как опустить иконку в ссылке?

Question

[jazzus]

Код

<a class="nav-link" :href="route">{{text}} <i class="far fa-arrow-alt-circle-right"></i></a>

в котором иконка высоковата

как совместить центр стрелки с цетром слова?

Comments

[Ankhena]

1. флексами
2. инлайн блоками и vertical-align
3. отступами

https://learn.javascript.ru/css-center

Answer 1

[jazzus]

.arrow-right {
  top: 1.5px;
  position: relative;
}

Answer 2

[MamaLuyba]

всё закинуть во flex и там выравнивать. либо бахнуть отступы тексту, либо иконке.

Answer 3

[tyzberd]

1. flex
2. обернуть текст в span и прописать

.nav-link span, .nav-link i {
display: inline-block;
vertical-align: middle;
}

Comments

[jazzus]

Сделал

<a class="nav-link" :href="route"><span>{{text}}</span> <i class="far fa-arrow-alt-circle-right"></i></a>
css

скинул кеши, без изменений