XF 2.1 Как сделать такой префикс?

[nictic123]

Всем привет! Подскажите, пожалуйста, как можно сделать такие префиксы тем?

 

[Reeder Tech]

В первых 2-ух стоит доллар. Фон и цвет текста - магия CSS
Насчет галочки - не знаю. Поищи в интернете как символ.

 

[Generus]

принцип тот же
Префиксы с использованием Font Awesome

 

[nictic123]

Насчет галочки - не знаю

Тоже FA, но меня не сами символы интересуют.

фон и цвет текста - магия CSS

это-то ясно-понятно. Но вот как иконку спереди и сзади сделать и убрать фон префикса, мне не понятно...

принцип тот же
Префиксы с использованием Font Awesome

Спасибо за наводку, попробую

 

[Captain]

это-то ясно-понятно. Но вот как иконку спереди и сзади сделать и убрать фон префикса, мне не понятно...

Псевдо элементы before и after

 

[DEVIL]

Префикс куплю:

.prefix.buy {
    color: #2EF8DE;
    text-shadow: 0 0 5px #0EB7A8;
}
.prefix.buy:before {
    color: #2EF8DE;
    text-shadow: 0 0 5px #0EB7A8;
    font-family: 'FontAwesome';
    content: "\f155";
    padding-right: 5px;
}
.prefix.buy:after {
    color: #2EF8DE;
    text-shadow: 0 0 5px #0EB7A8;
    font-family: 'FontAwesome';
    content: "\f155";
    padding-left: 5px;
}

 

[artscripts]

Можно оформить внутри

.prefix.buy {

    color: #2EF8DE;
    text-shadow: 0 0 5px #0EB7A8;


        &:before {

color: #2EF8DE;
text-shadow: 0 0 5px #0EB7A8;
font-family: 'FontAwesome';
content: "\f155";
padding-right: 5px;

        }

}

 

[DEVIL]

Коль пошла такая пьянка:

.prefix.checked {
    color: #00FF16;
    text-shadow: 0 0 5px;
}
.prefix.checked:before {
    color: #00FF16;
    text-shadow: 0 0 5px;
    font-family: 'FontAwesome';
    content: "\f14a";
    padding-right: 5px;
}

Ну и префикс продам.

.prefix.sell {
    color: #F3EE64;
    text-shadow: 0 0 5px #7D7911;
}
.prefix.sell:before {
    color: #F3EE64;
    text-shadow: 0 0 5px #7D7911;
    font-family: 'FontAwesome';
    content: "\f155";
    padding-right: 5px;
}
.prefix.sell:after {
    color: #F3EE64;
    text-shadow: 0 0 5px #7D7911;
    font-family: 'FontAwesome';
    content: "\f155";
    padding-left: 5px;
}

 

[Mirovinger]

Хм, всё можно и здесь описывалось, чуть подправить под себя - Префиксы для тем + возможность добавить Font Awesome 4 или своё изображение.

 

[nictic123]

Префикс куплю:

.prefix.buy {
    color: #2EF8DE;
    text-shadow: 0 0 5px #0EB7A8;
}
.prefix.buy:before {
    color: #2EF8DE;
    text-shadow: 0 0 5px #0EB7A8;
    font-family: 'FontAwesome';
    content: "\f155";
    padding-right: 5px;
}
.prefix.buy:after {
    color: #2EF8DE;
    text-shadow: 0 0 5px #0EB7A8;
    font-family: 'FontAwesome';
    content: "\f155";
    padding-left: 5px;
}

Вот это вот то, что мне нужно. Но вот как бы ещё на первой ветке его сделать?

 

[DEVIL]

Сверху Миро дал линк, там под себя переделайте.