FontAwesome
[ Cleaned up (mostly) and rewritten for 2sxc v16+ and FontAwesome v6+ 20230822 JRF ]
-
For our custom theme built with AccuTheme we (almost) always get the FontAwesome Kit on the page in code/control in includes/_preheader.ascx. Then, other than 2sxc, it just works and there is nothing to worry about. Upgrading versions (free to Pro or v5 to v6) can then be done on the FontAwseome site in the Kit's settings.
-
By default, 2sxc uses free FontAwesome and usually a) adds FontAwesome 5 Free (no-brands) to DNN's page output via CDN and b) uses a local copy of FontAwesome in the Edit UI (Angular) specifically in the Field Input icon-edit-picker.
Note that if we have FontAwesome on the page via AccuTheme, you do not want 2sxc adding a second version and we turn this off globally in the 2sxc Settings Stack (see below).
-
2sxc does 2-a (above) in each View's (Razor C#) code,
@Kit.Activate("FontAwesome5", "[other]")and gets the settings for this via the Settings Stack (Presets). -
The rest of this Wiki page explains how to get 2sxc to use FontAwesome Pro and/or a newer version (e.g. FontAwesome 6)
This was initial done on PDEG in 2021/22, though that effort was before @Kit and the Settings Stack and mostly just configuring the icon-edit-picker. In Aug 2023 we re-figured it out in detail and documented things here.
Both Bootstrap Icons and AccuTheme Icons are available with handy code shortcuts. To use Bootstrap Icons there is an AccuTheme helper (App_Code/AccuTheme.cshtml), you can see examples in _footer.ascx, e.g AccuTheme.BootstrapIcons()
By default there are no AccuTheme Icons, however, if they are added properly to the project ... [this option will either go away or be enhanced to make it more useful as well as easier to figure out and do]
Simple example using DnnJsInclude with a Kit:
<%-- FontAwesome Pro, Kits are managed here; https://fontawesome.com/kits
- <script src="https://kit.fontawesome.com/999999999.js" crossorigin="anonymous"></script>
--%>
<dnn:DnnJsInclude
FilePath="https://kit.fontawesome.com/999999999.js"
ForceProvider="DnnFormBottomProvider"
HtmlAttributesAsString="async defer crossorigin:anonymous"
Priority="100"
runat="server"
/>
Accuraty Owns a Full FontAwesome Pro Lisence, this allows us to use FontAwesome Pro fully in all our projects (yearly fee). So on most medium to large projects we upgrade the Theme to use Pro and the latest version.
If your theme is putting FontAwesome on the page then you do not want 2sxc adding it again, especially a different version. In DNN, make sure you are logged in as a Host (Super). In any 2sxc App, go to the App Admin interface (configure app). On the App tab you will see Settings. If you want to do this Globally (for the entire DNN+2sxc instance, all sites/portals), open the Global / System Settings (see screenclip below).
Then Edit System Settings. Expand Web Resources, add a new item, in the bottom field Resource Items click to add, add (+). Now you should be adding a new Web Resource Settings Identifier (it will show starting with, "WebResources.")
- Use the dropdown to select "FontAwesome5"
- Toggle the switch until it says, "Disbale this resource"
- Save, ok, close all
- Reload the page, view page source, and verify that it is no longer on the page; search for "awesome", something like this should NOT be there:
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js?cdv=138" ... ></script>
For reference: see PDPR2023 setup of Content-Types Link, LinkPlus and Accordion. The field name is Icon, its a String and is using the Input "font-icon-picker"
Related: UI Field String, Font Icon Picker https://github.com/2sic/2sxc/wiki/ui-field-string-font-icon-picker
- when your page (2sxc View) is loading the final content for the user on the DNN page output, this should be coming from the CDN (and is probably best managed/configured in your theme)
- in the 2sxc Edit UI (Angular), the Font-Icon Picker has its own settings in the Edit Fields UI; for cross-origin (security) reasons these need to load locally, not from CDN (according to the 2sxc Docs)
- Every 2sxc field using an Input of font-icon-picker will need to have its config update
Page/View Output:
- get our FontAwesome Pro "kit" (js) correctly on the page (see the Wiki; Fonts, FontAwesome or use the DnnJsInclude sample above)
- stop 2sxc from loading the free version; in most versions (v3 to v11+) of the Content-App, this just means making a change to one of the (usually untouched) files... simply comment out the section that is including the icons in shared assets (in v11+ this is
[App:Path]/Shared/_Assets.cshtml) - check now to see that both of the above are true (just View Page Source, search for "fontawesome" and make sure only the kit is on the page)
- at this point, all usage (2sxc or other) of FA icons
<i class="fas fa-check"></i>should be working
Font-Icon Picker in the 2sxc Edit Fields UI (requires setup PER field)
- now (optional but recommended) you need to configure the 2sxc Icon Picker UI so it allows you and the users to pick from the full Pro icon set
- these next steps should be done on the server, if that is not possible, then via FTP is an okay second choice
- first step is to get the Assets downloaded from FontAwesome; as of v6 this was a large blue button that says, "Pro for Web", the download will be a Zip file with a ton of stuff in it (over 150 MBs)
-
time-saver: leave the unzipped folder on the server for re-use,
C:\T\fontawesome-pro-6.4.2-web - unzip without changing the original filename, as of v6.4 it was
fontawesome-pro-6.4.2-web.zip - copy the contents of this entire folder to /Portals/0/2sxc/Content/Icons/fontawesome-pro << here (see screenshot below)
- important: make sure you "copy" (not "move") so that the files inherit the website folders permissions
- then update the settings in the Font-Icon Picker
- Preview Css Classes: "fas fa-solid" (for v6+ you do not need "fas" anymore?)
- Files: [App:Path]/Icons/fontawesome-pro/css/all.min.css
- save, reload, test...
- search for "lighthouse" it was introduced in v6.4+, so once you see it working in the Edit UI and on the Page
- to test that you are getting Pro icons (not just free), try "hospital-user" or "starship"
- other TESTS below
In the future, to update to a newer version of FontAwesome, we should be able to just download, extract, and copy the new version in to that folder.
Rather than upload a sep. copy to each app, instead of App:Path token you could try /Portals/0/2sxc/Content/Icons/fontawesome-pro/css/all.min.css
Reminder: [there is always a reminder, right?] for v6+ you have to update your 2sxc View output from
class="fas"toclass="fa-solid"or add some code to allow the user to select solid, duotone, etc. and put together the modern set of needed classes.
2sxc Docs (as of v16+) for the Font-Icon Picker Field Input Type https://docs.2sxc.org/basics/data/fields/string-font-icon-picker.html
Important: when you re-download FontAwesome as a Zip, make sure you are logged in to Accuraty's account (licensed) and download the Pro for Web version.
Note: this is what the Content App's default settings are for Link's Icon field:
To verify Free vs Pro or that you have the latest version (on the page and in the 2sxc Edit UI), here are some icons to try
- lighthouse - added v6.4
- dolphin - added v6.0 pro
- virus-covid - added v6.0 free
- spotify - brands
- child-dress - added v6.1.1
- water - added v5.5 free
- user-minus - added v5.0
- minus - an original from v1.0 and should always work
Search for more FontAwesome Icons here: https://fontawesome.com/search
FontAwesome has lots of great built in modifiers, here is a Cheat Sheet
Did you know that they have easy to use Animations?
Steps to add to a GitHub project Theme/OHS (see PDEG)
To get the assets in the project (node_modules), follow the Per-Project setup https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers
- add .npmrc
- npm install …
Then your assets will exist (for that version) in [CLIENT_CODE] \Portals_default\Skins\PDEG\node_modules@fortawesome\fontawesome-pro
Copy the following From To css/all.min.css /Portals/0/2sxc/Content/dist/fontawesome-pro/css/all.min.css webfonts/* /Portals/0/2sxc/Content/dist/fontawesome-pro/webfonts/*
Steps in 2sxc for the Icon Picker, Go to the Content-Type with your "icon" field, go in to the Fields editor and open the General Settings for that field, scroll down to the bottom, Font-Icon Picker section.
Css Prefix .fa- Preview Css Classes
Daniel's answer on StackOverflow tag 2sxc; "tricky" https://stackoverflow.com/questions/60662445/how-do-i-configure-the-font-icon-picker-in-2sxc-with-fontawesome-5
Don't forget FontAwesome has awesome sizers (like Bootstrap) for really big, beautiful icons... Example including larger Icons?
<i class="fa fa-car"></i> << normal
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
In the project in vscode CD to the project (theme) folder
npm update @fortawesome/fontawesome-pro
Then redo the "Copy the following"
https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility
W3 Schools has a nice "basics" page with a lot of usage samples! https://www.w3schools.com/icons/fontawesome_icons_intro.asp