Icons from Other Font Libraries [How to implement]

abd.ibrahim.allam · April 24, 2020, 7:10pm

Hi Team ,

I was trying to add font-awesome font icons as per tutorials

3.5.10.2. Using Icons from Other Font Libraries

below is my full code implemented to add font-awesome icons to my project

icon-awesome-style.scss

@mixin icon-awesome-style {

  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Font Awesome 5 Brands' !important;
  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: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../../fonts/fontawesome/webfonts/fa-brands-400.eot");
  src: url("../../fonts/fontawesome/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../../fonts/fontawesome/webfonts/fa-brands-400.woff2") format("woff2"), url("../../fonts/fontawesome/webfonts/fa-brands-400.woff") format("woff"), url("../../fonts/fontawesome/webfonts/fa-brands-400.ttf") format("truetype"), url("../../fonts/fontawesome/webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../../fonts/fontawesome/webfonts/fa-regular-400.eot");
  src: url("../../fonts/fontawesome/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../../fonts/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"), url("../../fonts/fontawesome/webfonts/fa-regular-400.woff") format("woff"), url("../../fonts/fontawesome/webfonts/fa-regular-400.ttf") format("truetype"), url("../../fonts/fontawesome/webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../../fonts/fontawesome/webfonts/fa-solid-900.eot");
  src: url("../../fonts/fontawesome/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../fonts/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("../../fonts/fontawesome/webfonts/fa-solid-900.woff") format("woff"), url("../../fonts/fontawesome/webfonts/fa-solid-900.ttf") format("truetype"), url("../../fonts/fontawesome/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }


.IcoAwesome {
  @include icon-awesome-style;
}

IconAwesome

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

public enum IconAwesome implements FontIcon {

    HEADPHONES(0XE900),
    SPINNER(0XE905);

    public static final String FONT_FAMILY = "IconAwesome";

    private int codepoint;

    IconAwesome(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 IconAwesome fromCodepoint(final int codepoint) {
        for (IconAwesome f : values()) {
            if (f.getCodepoint() == codepoint) {
                return f;
            }
        }
        throw new IllegalArgumentException("Codepoint " + codepoint
                + " not found in IconAwesome");
    }
}

IcoAwesomeIcon

import com.haulmont.cuba.gui.icons.Icons;

public enum IcoAwesomeIcon implements Icons.Icon {

    HEADPHONES("ico-awesome:HEADPHONES"),
    SPINNER("ico-awesome:SPINNER");

    protected String source;
    protected String name;

    IcoAwesomeIcon(String source) {
        this.source = source;
    }

    IcoAwesomeIcon(String source,String name) {
        this.source = source;
        this.name = name;
    }

    @Override
    public String source() {
        return source;
    }

    @Override
    public String iconName() {
        return name;
    }
}

IcoAwesomeIconProvider

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 IcoAwesomeIconProvider  implements IconProvider {
    private final Logger log = LoggerFactory.getLogger(IcoAwesomeIconProvider.class);

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

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

        try {
            resource = ((Resource) IconAwesome.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("ico-awesome:");
    }
}

web-app
cuba.iconsConfig = +com.vtss.vtower.web.screens.utils.fonts.IcoAwesomeIcon

helium-ext
@import "app/icon-awesome-style";

Questions

From what is the value 0XE900 which is used in HEADPHONES(0XE900) refers to ? For exampe for icon arrows-alt what shall i put ?
Also About the value source how can i refere to it
ARROWS_ALT("icon-awesome:arrows-alt"), this is what i’m trying to put

I i’m checking w3schools fontawesome5 icons reference but actually i don’t know from where can get this values

Is their is any thing is wrong with my implementation , if any please guide me

gorelov · April 27, 2020, 10:48am

Hi,

You can find these values in the detailed description of each icon, e.g.:

Screenshot 2020-04-27 at 14.42.43

For HEADPHONES we see that their code is f025, so the result value is 0XF025.

Could you please describe this question in more details?

Regards,
Gleb

abd.ibrahim.allam · April 27, 2020, 6:39pm

For that one I’m using below snippt to get the values is this the same way you getting the values ?

  int hex = Integer.parseInt("f369", 16);

This part as per the implementation from IconProvider Icon Path as below

iconPath.startsWith("ico-awesome:")

the source is concatenation between two strings Icons path first part + icon name

Is the name = enum value as per the implmentation
HEADPHONES("ico-awesome:HEADPHONES") For what actually HEADPHONES refers to ?

Also regarding below for Font Family variable

public static final String FONT_FAMILY = “IconAwesome”; IconAwesome Is this refers to any thing inside style sheet

Hope that i’m able to clarify

Thanks

gorelov · April 28, 2020, 10:51am

No, as I’ve shown above, I take a code from the icon page and use it as is with 0X prefix, e.g. 0XF025 for HEADPHONES.

Sure, as the documentation says:

where IcoMoon class name corresponds to the value returned by FontIcon#getFontFamily method

In your case, it’s .IconAwesome class name and IconAwesome#getFontFamily() method.

You can set an icon using either string in XML/Java or IconSet constant in Java, e.g.:

XML

<button icon="font-awesome5-solid-icon:USER"/>

Java

btn1.setIcon("font-awesome5-solid-icon:USER");
btn2.setIconFromSet(FontAwesome5SolidIcon.USER);

I’ve checked your styles and unfortunately, they are incorrect. .fab, .fas and the other FontAwesome class names are not added to icons. To be precise, you decide what class name will be added by implementing the getHtml() method:

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

So, as an example, the default icon looks as follows:

HTML

<span class="v-icon FontAwesome"></span>

You can see the FontAwesome class name. In your case, it will be IcoAwesome. So you need to define a unique class name for every FontAwesome variant (solid, brands, etc.). Also, you need to implement separate IconSets and Providers for every variant.

I’ve prepared a demo project: helium-extension-demo.zip (1.4 MB)

I hope it helps.

Regards,
Gleb

abd.ibrahim.allam · April 28, 2020, 11:51am

Thanks A lot

I will try it and feedback you ,
Thanks for the demo project , it will help a lot

gorelov · April 28, 2020, 12:31pm

Here is the updated demo with the support of regular icons: helium-extension-demo.zip (1.4 MB).

To be precise only icon providers and the enum class implementing com.vaadin.server.FontIcon interface must be unique per icon preset (solid, regular, brands). Icon set that implements the Icons.Icon interface can refer to all of them, e.g.:

public enum FontAwesome5Icon implements Icons.Icon {

    USER_SOLID("font-awesome5-solid-icon:USER"),
    USER_REGULAR("font-awesome5-regular-icon:USER"),
    JAVA("font-awesome5-brands-icon:JAVA");
...

So, this change is also included to the updated demo app.

Regards,
Gleb