Префиксы для тем + возможность добавить Font Awesome 4 или своё изображение

[SkyLoKi]

SkyLoKi добавил(а) новый ресурс:

Префиксы для тем + возможность добавить Font Awesome или своё изображение - Добавляем свои префиксы с иконками Font Awesome

Посмотреть вложение 81142Посмотреть вложение 81143​

Начну с простого.

в extra.less вставить следующий код:

.label{
    border-radius: 0px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-weight: bold;
    min-width: 65px;   
    text-align: center;
    &:before{
        position: absolute;
        border-top-right-radius: 40px;
        border-right: 2px solid rgba(0,0,0,0.1);
        top: 0;
        bottom: 0;
        left: 0...

Узнать больше об этом ресурсе...

 

[frozeus]

Совсем не плохо) Спасибо!

 

[Skaiman]

Норм, но на выходе префикс label--'test' кавычки убрать надо

 

[SkyLoKi]

Skaiman, действительно. Что то недосмотрел o_O
Код исправил. Заодно немного и описание аргументов поменялось

 

[Skaiman]

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

незаменимая вещь :)

 

[frozeus]

/******************************************
Добавляем свои префиксы
******************************************/
.addLabel('settings', #ccf9c8, url(/styles/node_icons/prop.png));
// Так же используется пользовательская иконка - /styles/node_icons/prop.png
// Использование: label label--settings

.addLabel("info", #fafafa, f129);
// Так же используется иконка Font Avesome - f129
// Использование: label label--info

Там где красным цветом, тоже бы убрать ковычки))

 

[SkyLoKi]

frozeus, нет, тут не надо
Это пример как можно добавлять новые префиксы

Первый аргумент может быть цифрой, словом. Может быть и в ковычках
Всё в порядке :)

 

[Classic]

Поддержка Font Awesome 5 SVG есть?

 

[SkyLoKi]

Classic, честно говоря не проверял.
Если есть у кого возможность проверить. То отпишитесь
в FA5 так же используются Unicode. Можно попробовать так:

.addLabel('lightGreen', lightGreen, f2b9);

Должна быть такая иконка:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Classic]

SkyLoKi, В Font Awesome 5 появились стили, что бы указать какой использовать, нужно писать префиксы.

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[SkyLoKi]

Classic, в Font Awesome 5 осталась поддержка шрифтовых версий. Для шрифтовых в целом подойдёт этот вариант.
Для JS нет (то есть SVG иконки).

Только что font-family: FontAwesome; придётся поменять на что то универсальное, что бы и брэнды поддерживать и остальные иконки

 

[Classic]

SkyLoKi, Да поддержка осталась но рекомендуется использовать JS вариант.

 

[SkyLoKi]

В целом есть небольшое решение использования FontAwesome 5 в css (не font)
Сделал костыль. Позже добавлю

 

[SkyLoKi]

OFFTOP

Ох. Правда. Не знаю.
Есть ли смысл выкладывать как отдельный ресурс этот костыльный CSS! код. Но как сооббщение оставлю

Поддержка Font Awesome 5
SVG Images
​

.label{
    border-radius: 2px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-weight: bold;
    min-width: 65px;  
    text-align: center;
   
    &:before{
        background-color: rgba(0,0,0,0.2)!important;
        position: absolute;
        border-top-right-radius: 10px;
        top: 0;
        bottom: 0;
        left: 0;
        padding: 1px 4px 0 3px;
        width: 20px;
        text-align: center;
    }
    &:after{
        position: absolute;
        top: 1px;
        bottom: 0;
        left: 0;  
        width: 25px;
        height: 85%;
    }
}

.addLabel(@name_nof, @color, @fa-uid:"none") when (iscolor(@color)){
    @name: e(%('label--%s', @name_nof));
    a.label.@{name}:hover, a:hover .label.@{name}{
        background-color: shade(@color, 4%) !important;
    }
    .@{name}{
        background-color: @color !important;
        border-color: shade(@color, 20%) !important;

        &when (lightness(@color) <  50%) {color: hardlight(@color, #cccccc) !important;}
        &when (lightness(@color) >= 50%) {color: hardlight(@color, #0a0a0a) !important;}

        &when (isurl(@fa-uid)){
            padding: 0 5px 0 32px;
            &:before{content: "";}
            &:after {
                background-color: hardlight(@color, #0a0a0a)!important;
                content: "";
                -webkit-mask: @fa-uid no-repeat;
                       -mask: @fa-uid no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
               
            }
           
        }
    }
}

.addLabel('plugin', hsla(240, 100%, 50%, 0.26), data-uri('/fontawesome/solid/cogs.svg'));
.addLabel('map', hsla(197, 62%, 68%, 0.26), data-uri('/fontawesome/solid/map-marker-alt.svg'));

Плюсы:

• Используется SVG от Font Awesome 5

Минусы:

• Иконки нужно загружать из папки :(
• Не отображаются любые другие иконки (в частности png, jpg... только svg загружается)

Другие варианты решения пока не нашёл.
Ах да. Папка fontawesome в корень сайта

Ну. Решение такое. Было кодера

 

[Dead Master]

обновил движок и получилось это

как решить проблему?

 

[SkyLoKi]

SkyLoKi обновил(а) ресурс Префиксы для тем + возможность добавить Font Awesome 4 или своё изображение новой записью:

Фикс

Фикс, связанный с обновлением XF До версии 2.0.2 (Префиксы для тем + возможность добавить Font Awesome 4 или...

Узнать больше об этом обновлении...

 

[SkyLoKi]

SkyLoKi обновил(а) ресурс Префиксы для тем + возможность добавить Font Awesome 4 или своё изображение новой записью:

Обновление

• Небольшие изменения в коде.

Код обновлён в основном посте

Узнать больше об этом обновлении...

 

[Liassid]

Как исправить?

 

[Skaiman]

лучше не использовать дефолтный класс label, разные стили, разная специфика и приоритеты свойств

 

[Liassid]

Skaiman, А что тогда использовать? Мне нужны префиксы с иконками.