| [NEON] Inclusion of additional icons from font-awesome [message #1722599] |
Sat, 06 February 2016 06:24  |
Eclipse User |
|
|
|
Dear all,
Scout provides some icons in the class "AbstractIcons". However, I want to use additional icons in my application.
As I have seen, Scout uses an icon font ("font-awesome") to display icons.
The font is stored in a file "scoutIcons.woff" and contains Scout-specific icons and some (but not all) icons from "font-awesome".
I want to use more icons from "font-awesome".
I have tried the following: I downloaded "font-awesome", renamed it to "scoutIcons.woff" and saved it to the HTML project below "WebContent/res".
After that, the icons from "font-awesome" were available, however the Scout specific icons (as e.g. the folder and the smartfield magnifying glass) were no longer available.
What is the preferred way to include "font-awesome" into my application without losing the Scout specific icons?
Regards, Samuel
|
|
|
| Re: [NEON] Inclusion of additional icons from font-awesome [message #1722703 is a reply to message #1722599] |
Mon, 08 February 2016 07:20  |
| Eclipse User |
|
|
|
Hi Samuel
The scoutIcons.woff file contains some custom icons that are not included in Font Awesome, e.g. the magnifying glass used in the smart fields. If you simply replace the default font file without adding the SVGs in org.eclipse.scout.rt.ui.html/src/icons, the corresponding icons will be missing in the UI.
Because it is much simpler, we recommend that projects contribute their own icons in a separate file. Here is how to do it:
- Add the *.woff File to your.project.ui.html/src/main/resources/WebContent/res
- Create a custom CSS (LESS) macro:
- your.project.ui.html/src/main/js/your-project/style/fonts.css
@font-face {
font-family: awesomeIcons;
font-weight: normal;
src: url('fontAwesome.woff') format('woff');
}
.font-awesomeIcons {
font-family: awesomeIcons, @font-default-family;
}
The first rule is a CSS font-face definition which makes the font from "fontAwesome.woff" available in CSS as "awesomeIcons". The second rule is used when specifying an iconId from the scout model (the font name prefixed with "font-").
- your.project.ui.html/src/main/js/your-project-all-module.css
//@include("your-project/style/fonts.css")
Your own module only consists of one file (yet).
- your.project.ui.html/src/main/resources/WebContent/res/your-project-all-macro.css
//@include("scout-module.css")
//@include("your-project-module.css")
The first line includes all default CSS definitions from Scout, the second adds your own new custom rule set.
- Change your *.html files to use the new macro instead of the default one. Open all *.html files in your.project.ui.html/src/main/resources/WebContent/res and replace
<scout:stylesheet src="res/scout-all-macro.css" />
<scout:stylesheet src="res/your-project-all-macro.css" />
- Use the new font icons as follows
- In CSS (for hard-coded UI icons):
.my-widget::before {
content: '\F0FC';
font-family: awesomeIcons, scoutIcons, @font-default-family;
}
- In Scout model code (Java):
// Your own icon constants class
public class MyIcons extends AbstractIcons {
// Pattern: "font:<CssFontName> \u<Unicode>"
public static final String Beer = "font:awesomeIcons \uF0FC";
}
getMyWidget().setIconId(MyIcons.Beer);
Regards,
Beat
[Updated on: Tue, 09 February 2016 03:02] by Moderator |
|
|
|
| Re: [NEON] Inclusion of additional icons from font-awesome [message #1722793 is a reply to message #1722749] |
Tue, 09 February 2016 03:14 |
| Eclipse User |
|
|
|
Hi Samuel
Yes, you are right, not all files reside in the same directory. I have fixed a small typo in my instructions (location of fonts.css).
The macro is the file referenced in your *.html files, therefore it needs to be in the WebContent/res order. It does not necessarily need to include custom code, e.g. you could write a macro that includes the "scout-module.js" and the "third-party-module.js".
The module is the code of a single software module. By convention, we place all module files on the root of the classpath, therefore the name needs to be unique (that's why we use the "your-project-" prefix). However, you might also place your module in /src/main/js/your-project/ and simply call it "module.css".
To ease development, not all code must be contained in a single file. Instead, many small files can be included in the module. They can even be other modules. To avoid filename collisions, we use a single directory as prefix, e.g. scout/style/fonts.css is different from your-project/style/fonts.css. This is similar to Java's packages, but shorter ("org/eclipse/scout/rt/ui/html" vs. "scout").
It works alike for *.js files.
|
|
|
|
|
|
| Re: [NEON] Inclusion of additional icons from font-awesome [message #1830700 is a reply to message #1722599] |
Fri, 31 July 2020 14:45 |
| Eclipse User |
|
|
|
Hi Beat,
What a nice coincidence. I recently migrated my project from Scout 7 to Scout 10. The last thing that I was going to fix were the fonts. Then I stumbled across this forum post that I opened a few years ago to learn about how this works in Scout 7. Nicely enough, I also found the answer of how this works in Scout 10.
I can confirm that your instructions worked like a charm.
Many thanks, Samuel
|
|
|
Powered by
FUDForum. Page generated in 0.05057 seconds
Home