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

[Mirovinger]

Я не уверен, что svg пройдёт, там проверка на то, что указано изображение присутствует, это нужно тестировать и возможно дорабатывать.

 

[jebir12]

Я не уверен, что svg пройдёт, там проверка на то, что указано изображение присутствует, это нужно тестировать и возможно дорабатывать.

.addLabel('WordPress'; #ccf9c8; url(/styles/fontawesome/wordpress.png));
и так тоже не робит

 

[Mirovinger]

Доступ в админку, что бы протестировать и посмотреть, ну или когда будет возможность гляну у себя.

 

[jebir12]

Доступ в админку, что бы протестировать и посмотреть, ну или когда будет возможность гляну у себя.

ответил в переписке, спасибо

 

[Mirovinger]

Да и я вижу, что всё работает.

Чуть подкорректировать размер, но в целом как видим нет проблем с картинкой.

 

[jebir12]

Да и я вижу, что всё работает.
Посмотреть вложение 143003
Чуть подкорректировать размер, но в целом как видим нет проблем с картинкой.

а как сделать адаптивный размер, под разный текст, чтоб не переносил текст, и отступы были ? стоит min-width: 70px; сделал 150px на главной отступы большие

 

[jebir12]

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 в корень сайта

Ну. Решение такое. Было кодера
Посмотреть вложение 81157

Подскажите как цвет текста и иконки поменять?

 

[facish]

label label--myPrefix, в extra.less до писал .addLabel('myPrefix'; #ccf9c8; url(/styles/fontawesome/brands/wordpress.svg));

в закрывающих скобках svg, есть лишния

 

[jebir12]

в закрывающих скобках svg, есть лишния

.addLabel('sh', hsla(240, 100%, 50%, 0.26), data-uri('/fontawesome/brands/codepen.svg')); сделал обновленную версию, теперь другая проблема! у меня работает только в одном префиксы тем, если я создам новую с такими же настройками префикс или добавлю в узел существующий префикс, в узлах в других не отображается.

 

[craster]

Как увидеть скрытый текст ?

 

[Riconc]

craster, ознакомится с правилами. Правила или приобрести группу проверенный https://xenforo.info/account/upgrades

 

[IvanColins]

Подскажите как увеличить в право или те текст в лево.

 

[WidNem]

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 в корень сайта

Ну. Решение такое. Было кодера
Посмотреть вложение 81157

SkyLoKi, загрузил в корневую, все сделал, префикс - есть, FontAwesome не отображается.
вот код добавления:

.addLabel('odobreno', hsla(120, 90%, 50%, 0.26), data-uri('/styles/fonts/fontawesome/regular/check-circle.svg'));

вот так выглядит:

 

[Matew]

Я не очень уверен, что этот мануал актуален в 2025 году под последние версии движка