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.
Related
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'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.
I am new to DotNetNuke and come from a WP/Drupal background. I can't find any documentation on what I feel should just be a simple thing to do.
I need to have three different layouts, a Homepage layout which just uses a simple 12 column gird.
An InteriorA page where it uses a 9 col grid with a 3 col
Then an InteriorB page where it uses a 3-3-6-12 grid.
I dont see where I build and save these templates in code, then where to assign them to the pages I want to use them on.
Following up on the previous answer, resources available to you include the Xcillion theme that is provided with DNN installs. You will find the entire skin in /Portals/_defauilt/skins/Xcillion.
The "page layouts" are the .ascx files. The details of the layout are the "content panes" included in the .ascx files. They are the divs with IDs and the runat-server attribute.
You can define the layouts using different skin files, and then put content (modules) in the content panes that you would like to use. In other words, you can include the 3 layout possibilities in one .ascx, and place content appropriately.
The DNN Wiki has http://www.dnnsoftware.com/wiki/dotnetnuke-skins, with covers the basics of theming. You should be able to find more resources by Googling. One great resource on theme construction is DNN Hero's tutorials from DNN Creating. Start at dnnhero.com. This is a subscription service, though.
The location of these file is usually in a folder such as below:
\Portals_default\Skins
There are also skins which may be installed on a "portal" level:
These would be seen here:
\Portals\0\Skins
In here you should find a folder which is the name of the skin - And then the ASCX files for each individual skin file.
OK, so I have built a Windows Form application. I now want an icon for it. So I use the Icon Editor built into Visual Studio 2012. Draw it all out to look nice and purdy. Once I am done, I have a .ico file and I make it the default icon for the project, and also the icon for the one WinForm in the application.
Unfortunately, it does not show up as I have created it! It is displayed as the default icon file as it existed before I modified it in the icon editor. It's a 32x32 4 bit icon. If I change the extension to .bmp it shows up as the default.
It looks like the VS icon editor is editing something else, not the appearance of the icon. Can someone tell me what I am doing wrong?
I used to have a progam called IconArt that would create icons that looked like icons when I used them in VS. IconArt is now abandonware and won't run on my 64bit Windows workstation.
Since I didn't get any answers within the time I was hoping, I posted this question also in the MSDN Visual Studio forum, and got a good answer that I thought I should post here. Credit to Reed Copsey, Jr, for the answer!
This is it:
You'll need to put your design in all of the different versions. ICO
files contain multiple versions of the same image, for different
screen resolutions.
My personal preference is to not use VS - there's an ICO plugin for
Paint.Net (all free) which allows you to make a single image
(typically 256x256), and save multiple versions within an ICO file in
one shot. It's very useful for building icons.
See
http://forums.getpaint.net/index.php?/topic/927-icon-cursor-and-animated-cursor-format-v37-may-2010/
for the plugin.
Since I am a Paint.Net user, the plugin sounded like a great idea, and I tried it. Bingo! This works very nicely.
I have downloaded three fonts - .tff files - from http://www.FontIneed.com and installed them under Linux. They are really installed throughout the system because they are now present in the OpenOffice suite fonts drop down boxes.
As I have installed CKEditor as rich text editor in Drupal, I have tried to add these fonts to it.
I already had a problem when testing in Drupal->Config->CKEditor->Advanced if the Javascript insertion works for a given profile. I entered exactly the example that is provided under the texfield box but, when created a new block in Full HTML, the fonts drop-down list presented the whole set of available fonts (not only the ones I have entered).
Then, I wanted to add my new fonts to the CKEDITOR.config.font_names in the plugin.js file (although I don't like that because it will blow-up my setting when new release will overwrite this file ...). But the new fonts don't show up.
What should I do?
Thanks
PS: I may have a problem entering their names. For example, I've got one font with the Zipty_Do.tff file; the first line of the file says 'Zipty Do, Regular' and that's the name I've entered
Regardless of wether you are able to get your new fonds to show up in CkEditor, I believe that if you have installed a free font, chances are that they are not standard system fonts. Without embedding the fonts on the site itself these fonts will only be available to you and will thus show up different to visitors of your site.
A module I found extremely helpful in embedding non system fonts is Cufon http://drupal.org/project/cufon. Hope this helps.