I'm referring the icons from following link. Some of the icons nice to have as part of Font Image class. Example: Label is part of the library and Label_Important isn't. Is there any plans to add the missing icons to make it up to date? Please advise
https://material.io/tools/icons/?style=baseline
It's a problem see this. Google stopped maintaining the icon font and there is no newer version. We'll probably migrate to a new icon font and include a wider selection as a result but that will require some work. Notice you can install your own icon fonts.
Related
DNN 9.3.1
2sxc 10.25.2
I added a field in a 2sxc content module called "Icon" and made it a Font Icon Picker. My DNN skin has FontAwesome 5 loading via CDN in CSS.
Looking through the 2sxc font icon picker field settings it expects the CSS Prefix, the Preview CSS Classes, and the Files for the fonts. (I get my FontAwesome 5 icons from CDN but I understand that I need to reference them locally - so I downloaded Font Awesome 5 and uploaded it to my server and reference it there).
But Font Awesome 5 (Free) has 3 different prefix classes for fonts: fab, far, and fas. (brands, regular, and solid).
So when I use the picker to choose an icon, it doesn't prefix the icon correctly. I would expect that when I choose the icon, it adds the correct prefixes like "fas fa-user" but it only outputs "fa-user" so the icon doesn't appear.
My razor template looks like this:
<i class="#Content.IconPicker"></i>
Am I setting this up incorrectly or does 2sxc Icon Picker not able to support Font Awesome 5? How can I configure the settings to get Font Awesome 5 to work?
this is indeed tricky. Let me give some background:
Fontawesome has different font files and different css files for targeting the icons
Unfortunately this causes trouble in the picker, because the picker cannot be configured to show icon previews with different prefixes - so as of now, the picker usually can only be configured to show one set of these icons
The same problem arises with the output as you noticed - in some cases a different prefix would be important, but the picker doesn't give you the prefix, just the icon name
We also had another problem that really bugged us: these icon-fonts really hurt our google page speed rating - ca. 10-20 points depending on the scenario! Because of this, we spent almost 2 weeks to find a better solution. And we have found it :). It's just not well standardized / documented :(.
Here's how it works:
basically all icons have different names anyhow, so the prefix wouldn't matter. This was just an optimization introduced by font-awesome, but it's not good anyhow.
So we need to have a css file which lists all icons, but just correctly uses the right font-file no matter what prefix is used. We can generate such a file and already have some working scripts that do it, but it's not in a state we could share :(
This css file should then be used in the icon picker
And in the page, because then the prefix doesn't matter
That's how we're solving it. Sorry that it's not simpler.
We're going a step further: if you have the commercial license of font-awesome, you can use a JS loader in your page which doesn't use the fonts at all, but just gets the 3-4 SVGs you're actually including in the page. That gives us the extra 10-20 points on PageSpeed! But because it's commercial license only, I can't share this with the public. If you do have the commercial license though, that's the way I would go.
I have been using Fontawesome 5.6 (free) in a winforms project, and rendered glyphs by referencing the character code into a variable. "&HF084" would show the Key character in VB.net for example.
The latest versions of Fontawesome, like 5.10, while still having the same character codes for the same icons, don't always render the icon, even if it's available in the free version I'm using.
I have noticed in a few comments, that specifying weight would fix the issue, at least for css rendering.
Specifying Bold style under a label with the font does fix the issue of non-rendering icons, however they are rendered much more heavy than they should be. Previously specifying Regular font style used to work for all icons, however that is not the case now.
As far as I'm aware I can't specify weight of a font by point in winforms, just specify the style (regular, bold, underlined, etc.)
EDIT: For more information, I am using the ttf font files that come in the web folder of the web zip file of fontawesome. The reason for this is that otf file format doesn't work on Windows server 2003, which is an environment that will run the WinForms app.
I've been using Sketch for years now and of course I love it. Recently tho I've come across a strange bug. When I have a font layer selected I can't change the font face. It doesn't matter what font I have selected. The fonts are installed. I have to right-click and change the font properties from the font menu. The font pulldown flashes when I click on it, but I can't see or select any other fonts. Any ideas why this would suddenly happen? I use Skyfonts, but I doubt that's an issue. Thanks!
I'm having the same issue right now.
The strange thing is, that it's only happening on "older" files.
For example, if I create a new Sketch file and type something, I can change the font face.
I'm sure, Bohemian already knows about this. But for now, a work-around is to create a new file, type something, change the font and copy the font into the other file.
I hope this helps!
This is a bug in the newer version of Sketch. Downgrading resolves the issue...
Here you can downgrade to any version here: https://www.sketchapp.com/updates/
The issue has been fixed in the new sketch(ver:51.1).
Does codenameone has support for Google material design,if yes help me with a sample code on how to use (both icon and font) it in my app.
Thanks
Not every element of Material design is supported but the fonts (roboto) etc. will be used when you pick the native: fonts in the Designer tool.
You can also use all the material design icons using the FontImage class see https://www.codenameone.com/blog/material-icons-background-music-geofencing-gradle.html
There are quite a few other things but the question is a bit vague.
I've got several instances in my app where I'm using a png icon from the standard wp7 icon library. I need to be able to alternate between light and dark versions of this png depending on the theme that the handset device is set to.
Now, I know how to detect the theme. However, how should I handle alternating between two versions of my images?
Do I create 2 different resource dictionaries and programatically switch between them in code? (honestly I have no clue how to do this)
Do I set some static resource "flag" somewhere based on what theme is detected?
I'm having some difficulty with my approach here, and would appreciate some guidance.
Here are some solutions:
Option 1)
You could use one image and OpacityMask so that your icons will remain consistent in both light/dark themes.
Option 2) You can take a look at this discussion:
LockedHow to change Metro icons based on selected theme
If you are using the standard wp7 icons for the appbar then you only need to add the icons from the dark theme -- the phone will automatically switch them to the light theme without any additional programming.
However, if you are using custom icons you will have to do something along the lines of what BMiloshevska said and use the OpacityMask.