Выровняйте значок шрифта рядом с текстом, используя css в Wordpress - PullRequest
Новая
       30

Выровняйте значок шрифта рядом с текстом, используя css в Wordpress

0 голосов
/ 31 марта 2020

Я пытался проверить SO, но не обнаружил, что косвенно относится к моему делу. Я работаю над сайтом Wordpress. Я добавил значки на страницу, используя ее настройщик, но мне нужно закончить выравнивание. В настоящее время значки плавают по тексту. Я не могу получить доступ к исходному коду, только настройщик, который я могу завершить работу. Мне нужно мнение экспертов о том, как этого добиться. Спасибо. 

This is the main text in a tab I'm adding icons to
<li id="friends-personal-li" class="bp-personal-tab">
    <a href="https://yyyyyy.com/profile/" id="user-friends">Friends<span class="count">2</span></a>
</li>

Это потрясающая иконка, которую я добавляю 

#friends-personal-li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c0";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
    color: blueviolet;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

1 Ответ

1 голос
/ 01 апреля 2020

Вы можете попробовать что-то вроде 

#friends-personal-li{
  position: relative;
}
#friends-personal-li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c0";
    display: inline-block;
    font-weight: 900;
    color: blueviolet;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
    position: absolute;
    top: -2px;
    left: -3ch;
}

Если вы пытаетесь сделать что-то подобное Friends 2

Если вы делаете родительский элемент position: relative; тогда вы можете легко разместить элемент :before, используя absolute и ссылаться на родительский элемент.

...