Как свапнуть местами текст и иконки font awesome?

Question

[art style]

Как свапнуть местами текст и иконки font awesome?
<i class="fab fa-telegram-plane">ТЕКСТ</i>

Comments

[Ankhena]

1. flex (или инлайн-флекс) и flex-direction: row-reverse родителю
2. flex родителю, order иконке
3. По спецификации использовать FA ТЕКСТ<i class="fab fa-telegram"></i>
4. Отправить псевдоэлемент абсолютом направо.

[art style]

Ankhena, Эти все решения понятны. я имею ввиду официальную документацию, так вообще можно сделать или нет? <i> идет как отдельный элемент и в него нельзя вписывать текст?

[Ankhena]

art style, ничего не мешает вам к своему классу сделать псевдоэлемент (::before или ::after) и задать ему

content: "тут символ из шрифта";
font-family: Fontawesome; /*правильное написание смотрите в своей версии*/

и дальше размер, цвет, что там еще нужно.

Answer 1

[Sergey]

1. flex-direction: row-reverse
2. копи-пастом местами поменять
3. :before -> :after
4. вопросы правильно задавать и предоставлять код

Comments

[art style]

<i class="fab fa-telegram">ТЕКСТ</i>
это дефолт использование font awesome. нужно применить какой-то класс но в доках такого не могут найти

[Sergey]

art style, по дефолту надо писать так:

<i class="fab fa-telegram"></i>&nbsp; ТЕКСТ

поменять местами так:

ТЕКСТ&nbsp;<i class="fab fa-telegram"></i>

Примеры на официальном сайте

[Sergey]

[art style]

Firsov36, мне нужно именно внутри не выходя за рамки <i> полюбому должен быть способ

[Sergey]

art style, обновил свой пример. Как я и писал, первый пункт в моем первоначальном ответе: 1. flex-direction: row-reverse. Но подумайте, стоит ли так делать...

Последний блок:

[Sergey]

Ну вот получили нужный ответ, чего отметку "является решением" не поставить

[art style]

Firsov36, потому что это не решение. я и так знал что можно это делать через флексбокс. меня интересовало как это сделать через иконку font awesome. видимо нельзя. но я нажму если это так важно

[Sergey]

art style, что значит не решение? Я же вам показал решение, в том числе и «через иконку font awesome» добавив к стилям иконки пару строк. В вашем случае, используя НЕ правильно font-awesome, а именно текст внутри тега <i> только «костылем» можно поменять местами текст и иконку и этот костыль я вам тоже указал. И если использовать правильно font-awesome, а именно тег <i> рядом с текстом, как подразумевает разработчик и документация, тоже приведены примеры решения. Причем, если использовать <i> отдельно от текста (рядом с текстом), то можно использовать и дополнительные классы модификаторы