Skip to content
This repository has been archived by the owner on Feb 13, 2024. It is now read-only.

FontAwesome

Jump to bottom
Jeremy Farrance edited this page Apr 10, 2021 · 27 revisions

FontAwesome, FontAwesome Pro, and 2sxc Icons

Quick Overview

  1. Adding FontAwesome (free)

  2. Or FontAwesome Pro - This covers ...

  3. Getting 2sxc to use FontAwesome Pro - Like we did in PDEG

Reminder: [there is always a reminder, right?]

Adding FontAwesome

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/c0d3fuzzee.js" crossorigin="anonymous"></script>
--%>
<dnn:DnnJsInclude
  FilePath="https://kit.fontawesome.com/807925797.js"
  ForceProvider="DnnFormBottomProvider"
  Priority="100"
  runat="server"
/>

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/xie1khe.js"  
  HtmlAttributesAsString="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)...

2sxc uses FontAwesome by default, but using Pro is much nicer

[ 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

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>

How to update the FA-Pro version

In the project in vscode CD to the project (theme) folder

npm update @fortawesome/fontawesome-pro

Then redo the "Copy the following"

What about Accessibility?

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

Clone this wiki locally