FontAwesome
[ this is a mess and needs a clean-up and re-write, thought there is a ton of useful stuff on this page ]
-
Built in Icon Sets and Utilities
-
Adding FontAwesome - Free or FontAwesome Pro
-
Getting 2sxc to use FontAwesome Pro - Like we did in PDEG
Both Bootstrap Icons and AccuTheme Icons are available.
To use Bootstrap Icons there is an AccuTheme helper, 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
Similar to Fonts, use DnnCssInclude
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:async,defer:defer,crossorigin:anonymous"
Priority="100"
runat="server"
/>
<%-- TypeKit
Can we use HtmlAttributeAsString yet?
Worth reading; https://dnncommunity.org/forums/aft/286
And there are DOCS; https://www.dnndocs.com/content/tutorials/client-resources
--%>
<dnn:DnnJsInclude
FilePath="https://use.typekit.net/xyx7khk.js"
HtmlAttributesAsString="crossorigin:anonymous"
Priority="100"
runat="server"
/>
This allows us to use FontAwesome Pro fully in all our projects (yearly fee)...
[ 2sxc changed a lot of this in v12+, needs research and rewrite... ]
[ misc notes moved here, needs clean-up and rewrite... ]
Related: UI Field String, Font Icon Picker https://github.com/2sic/2sxc/wiki/ui-field-string-font-icon-picker
To use FontAwesome Pro in 2sxc Icon pickers, see PDEG setup of Content-Types Link and Link-Addon.
The field name is Icon
It is important to understand there are two sides to this. 1) 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. 2) 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.
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
- first step is to get the Assets downloaded from FontAwesome; this will be a Zip file with a ton of stuff in it
- unzip without changing the original filename, as of v6.4 it was
fontawesome-pro-6.4.2-web - copy this entire folder to /Portals/0/2sxc/Content/Icons/ << here (see screenshot below)
- 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-6.4.2-web/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"
Rather than upload a sep. copy to each app, instead of App:Path token you could try /Portals/0/2sxc/Content/Icons/fontawesome-pro-6.4.2-web/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:
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