Расширение темы дополнительными иконками

Здравствуйте. Уже долго пытаюсь добавить дополнительные иконки к своей теме. В проекте предустановлен набор иконок FontAwesome. Но стоит версия 4.4.0. Меня заинтересовали иконки версии 5.0.0. А так же иконки Glyphicon. Как обновить версию я не нашел, поэтому решил создать так называемое расширение на основе FontAwesome 4.4.0. Я нашел набор файлов для Glyphicon *.eot *.svg *.ttf *.woff *.woff2. Добавил в тему по пути Themes -> MyThemes ->fonts -> glyphicons. По пути Themes -> MyThemes ->fonts создал стиль glyphicons.scss

@mixin glyphicons {
@font-face {
    font-family: "Glyphicons";
    src: url("../glyphicons/glyphicons-halflings-regular.eot");
    src: url("../glyphicons/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
        url("../glyphicons/glyphicons-halflings-regular.woff2") format("woff2"),
        url("../glyphicons/glyphicons-halflings-regular.woff") format("woff"),
        url("../glyphicons/glyphicons-halflings-regular.ttf") format("truetype"),
        url("../glyphicons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
  }
  .glyphicons {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: "Glyphicons";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

и в файле styles.scss импортировал его

@import "fonts/glyphicons";

@include glyphicons;

Далее я создал два класса
Glyphicons

import com.vaadin.server.FontIcon;
import com.vaadin.server.GenericFontIcon;

public enum Glyphicons implements FontIcon {

    MY(0XE005);


    public static final String FONT_FAMILY = "Glyphicons";
    private int codepoint;

    Glyphicons(int codepoint) {
        this.codepoint = codepoint;
    }

    @Override
    public String getFontFamily() {
        return FONT_FAMILY;
    }

    @Override
    public int getCodepoint() {
        return codepoint;
    }

    @Override
    public String getHtml() {
        return GenericFontIcon.getHtml(FONT_FAMILY, codepoint);
    }

    @Override
    public String getMIMEType() {
        throw new UnsupportedOperationException(FontIcon.class.getSimpleName()
                + " should not be used where a MIME type is needed.");
    }

    public static Glyphicons fromCodepoint(final int codepoint) {
        for (Glyphicons f : values()) {
            if (f.getCodepoint() == codepoint) {
                return f;
            }
        }
        throw new IllegalArgumentException("Codepoint " + codepoint
                + " not found in Glyphicons");
    }
}

Код E005 есть в файле *.svg. Я так понимаю по этому коду цепляется иконка из файла.
И создал класс GlyphiconProvider

package ru.mt.ev.web;

import com.haulmont.cuba.web.gui.icons.IconProvider;
import com.vaadin.server.Resource;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

@Order(10)
@Component
public class GlyphiconProvider implements IconProvider {
    private final Logger log = LoggerFactory.getLogger(GlyphiconProvider.class);

    @Override
    public Resource getIconResource(String iconPath) {
        Resource resource = null;

        iconPath = iconPath.split(":")[1];

        try {
            resource = ((Resource) Glyphicons.class
                    .getDeclaredField(iconPath)
                    .get(null));
        } catch (IllegalAccessException | NoSuchFieldException e) {
            log.warn("There is no icon with name {} in the FontAwesome icon set", iconPath);
        }

        return resource;
    }

    @Override
    public boolean canProvide(String iconPath) {
        return iconPath.startsWith("glyphicons:");
    }
}

В дескрипторе экрана вызываю icon=“glyphicons:MY”
но это не работает.
Перечитал документацию там ровно такой метод описывается. Что я делаю не так? Как можно расширить тему иконками и вызывать их через свойство icon (это одно из обязательных условий задачи, если это возможно)? Возможно есть более простой способ установки шрифтов и иконок FontAwesome и Glyphicon в среде CUBA?

1 симпатия

Исправил

public static final String FONT_FAMILY = "Glyphicons";

на

public static final String FONT_FAMILY = "glyphicons";

параметр FONT_FAMILY должен иметь значения css класса.
И все заработало. Осталось описать все иконки в enum классе.

Но вопрос как сделать лучше, и как обновить FontAwesome (а так же сгенерировать класс с перечислением иконок и unicode) пока остается открытым.

Добрый день!

Вы можете зарегистрировать FontAwesome 5 как новый шрифт, аналогично Glyphicons, или указать font-family: 'FontAwesome';, и, тем самым, заменить FA, входящий в состав платформы, на FA 5.

Это исключительно ручная работа.

С уваженим,
Глеб

Нашел проект с файлами шрифтов для FontAwesome. Сделал по аналогии с Glyphicons. Все заработало. А где нужно указать font-family: 'FontAwesome' что бы заменить текущий FA на FA5?

В файле scss, в котором подключаются шрифты, например:

@mixin fa-solid-style {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'FontAwesome';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'FontAwesome';
  src:url('solid/fa-solid-900.eot?hwgbks');
  src:url('solid/fa-solid-900.eot?hwgbks#iefix') format('embedded-opentype'),
  url('solid/fa-solid-900.ttf?hwgbks') format('truetype'),
  url('solid/fa-solid-900.woff?hwgbks') format('woff'),
  url('solid/fa-solid-900.woff2?hwgbks') format('woff2'),
  url('solid/fa-solid-900.svg?hwgbks#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.FontAwesome {
  @include fa-solid-style;
}

Здравствуйте. Не хотелось создавать новую тему. Так как вопрос исключительно снова по иконкам. Поставил сегодня новую версию cuba-studio-2019. И теперь компилятор не распознает иконки которые я подключал. У меня есть наборы иконок с префиксами

@Override
    public boolean canProvide(String iconPath) {
        return (iconPath.startsWith("fa-brands:") || iconPath.startsWith("fa-regular:") || iconPath.startsWith("fa-solid:") || iconPath.startsWith("glyphicons:"));
    }

И все иконки которые есть в проекте с такими префиксами

 icon="fa-solid:FAS_QUESTION_CIRCLE"

теперь с ошибкой компилятора cannot resolve symbol.
Все кроме стандартных

font-icon:INDUSTRY

Как это исправить? Возможно нужно где то указать эти новые типы?

Добрый день.

Компилятор ругается при сборке проекта или что-то подчеркивается красным в разметке экрана? Не могли бы вы приложить стектрейс?

Лучше создать новую тему, т.к. суть вопроса другая.

Глеб

создал новую тему.