I am using vis.js with font awesome version 5.9.
It is showing an empty square initially. But when i click on that empty square it turns the actual icon. It didn't show when i add the icon.
After that when i click on another icon i.e. start. it turns back to square.
All the required files are present in the source i.e. fontawesome.css changed to all.css in version 5, vis network js and css.
Tried all of the solution that are available on documentation and are present on stackoverflow.
shape: 'icon',
icon: {
face: '"Font Awesome 5 Free"',
code: '\uf46d',
size: 50,
color: 'red'
},
Did you solve this?
I tried replacing Font Awesome 4 in examples by Font Awesome 5 and got the same issue. It seems like FA5 changed something and it's no longer compatible with Vis Network. We should probably open an issue: https://github.com/visjs/vis-network/issues/new.
It works with Font Awesome Pro and double quoting (still required even with Vis.Js 6.12):
"icon": {
"face" : "'Font Awesome 5 Pro'",
"code" : "\uf0c0",
"size" : 50,
"color" : "green"
}
because Font Awesome Pro defines bold font as "Solid" and not bold as "Regular".
In Font Awesome Free there is only bold font defined. One work around not tested would be to add not bold font to Font Awesome, or modify VisJS to use only bold fonts even if icon is not selected.
Related
In my JS code I would like to create a teardrop marker and add an icon to it using addLayer when adding a tileset, varying the icon depending on some property values.
When adding a layer there is an icon-image setting under layout options to select an icon. With that I can select the maki teardrop marker-15 or I can select one of the other maki icons that are currently supported.
What I would like to do it put other icons on top of the teardrop and colour the teardrop, for the classic icon-on-top-of-teardrop marker.
I also find that icon-color in the paint options for this maki teardrop does nothing - it comes out black every time.
const layerDefinition = {
'id': layer.id,
'type': 'symbol',
'source': layer.name,
'source-layer': layer.name,
'layout': {
'icon-image': 'marker-15' ,
'icon-size': 1
},
'paint': {
'icon-color': "red"
}
}
map.addLayer(layerDefinition, insertLayerId)
You'll need to build the SVG icon for each color/icon combination.
The Maki icon editor can do this for you, but only supports a square or circle background, not a teardrop background.
Makiwich is another option, but requires some coding to help generate these teardrop icons with arbitrary icon and color.
You can then either use these generate icons as a Marker or as a symbol icon.
icon-color can only be used with SDF icons (see https://docs.mapbox.com/mapbox-gl-js/api/#map#addimage, you must pass { sdf: true } as the option to addImage, not SVG icons. Some discussion about supporting icon-color for SVG based icons is at https://github.com/mapbox/mapbox-gl-js/issues/3605. Multiple icons as part of the symbol icon (so you can have a teardrop background an another icon inside it) is discussed at https://github.com/mapbox/mapbox-gl-js/issues/4366.
For a while now I am looking for a solution to increase selected components font sizes in Eclipse IDE. This is due to the fact, that this IDE is completely unusable on high DPI monitor (unless one is a hawk).
In this answer ( Change Project Explorer tree view font size in Eclipse Oxygen ) I have found how to increase the font size of the project explorer and the outline:
.MPart Tree {
font-family: Consolas;
font-size: 14;
}
Now I am looking for a way to increase the font of context assist. This simple solution wont do:
* {
font-size: 14;
font-family: Hack;
}
It does increase all possible fonts in the editor, but it also forces this font size everywhere. For example, If I change the font of the editor (by doing ctrl - or ctrl shift +), then click away somewhere, the editor font will detrimentally go back to the set font in the css file. I believe this is somehow bugged. So the only way for me now is to increase the content assist font only. Is there a css tag for that? How to do this?
In InDesign I use the Google Font Kadwa to generate a right arrow (→).
I load the font into my website but the arrow is too wide.
#import url('https://fonts.googleapis.com/css?family=Kadwa');
body {
font-family: 'Kadwa';
}
You see, the font is applied but the arrow is too wide →
On the Google Font page the arrow is rendered correctly.
https://fonts.google.com/specimen/Kadwa?selection.family=Kadwa
I dont get it, what I am doing wrong.
Would be nice if somebody has a solution for that.
It looks like that character is not being loaded with the font for some reason. You can actually force Google fonts to load a particular character or set of characters by including a text parameter in the request. (The characters must be url encoded.)
I've added an additional font request below that loads a font with only the arrow character. This supplements the Kadwa font that's already been loaded, and everything shows up correctly.
I've also converted the arrow character to an HTML entity (→).
#import url('https://fonts.googleapis.com/css?family=Kadwa');
#import url('https://fonts.googleapis.com/css?family=Kadwa&text=%E2%86%92');
body {
font-family: "Kadwa";
}
This should have the correct arrow →
Is there some way to define a text sprite with some more style options then just size and font as shown in the example?
{
type: "text",
text: "Hello, Sprite!",
fill: "green",
font: "18px monospace"
}
Specifically, I want to make it bold or underlined.
I tried a style config like this:
style: {
'text-decoration': 'underline'
}
I also tried setting it in the font config like this:
font: "underline 18px monospace"
Neither worked.
This sentence from the Ext.draw.Sprite#font config in the docs sounded promising but it is pretty cryptic:
Uses the same syntax as the CSS font parameter
I've been googling around for the CSS font parameter and haven't found much of use. Maybe if someone knows what that means they can shed some light on this.
The font css attribute will let you specify bold and italics, but underline is set using the text-decoration attribute. You'll need to use a style config:
{
type: "text",
text: "Hello, Sprite!",
fill: "green",
font: "bold 18px monospace",
style: {
textDecoration: "underline"
}
}
Working demo: http://jsfiddle.net/gilly3/WSQv9/.
Tested in Chrome and IE9. Firefox doesn't yet support underline in SVG.
For reference, here is the font parameter definition:
MSDN
MDN
I've never used extjs, but it looks like SVG to me. Unfortunately Firefox doesn't support text-decoration attribute on svg elements, so perhaps you are testing in Firefox but in Chrome it might be displaying fine with your style attribute.
The workaround for this would be drawing the underline manually with a line element. It is not difficult with javascript but I would have no idea of how to accomplish this the extjs way.
By setting fontfamily directly to textarea in mxml fonts get applied to special characters. But using tlf and setting fontfamily it does not apply.
style.css ::
#font-face
{
src: URL("/Assets/Fonts/GandhariUnicode-Bold.otf");
fontFamily: "GandhariUnicode-Bold";
embedAsCFF: true;
}
snippet of source code ::
textArea.textFlow.interactionManager.selectRange(beginIndex, endIndex);
var textLayoutFormat:TextLayoutFormat = getTextLayoutFormat();
textLayoutFormat.fontLookup = FontLookup.EMBEDDED_CFF;
textLayoutFormat.fontFamily ="GandhariUnicode-Bold";
textLayoutFormat.renderingMode = RenderingMode.CFF;
Embedded fonts can behave strangely. I see you're using a bold font, have you tried also setting explicitely font weight to bold when embedding you font or/and on the TextLayoutFormat object?
Also, I've found this thread wich migh be useful : http://forums.adobe.com/thread/635711
Have you tried just setting the fontFamily and that's it? Add the normal font weight definition as well and see what changes.