-
Notifications
You must be signed in to change notification settings - Fork 0
Icons
Bootstrap icons are built in to AccuTheme, FontAwesome Pro requires quick setup steps.
- Bootstrap's SVG sprite file is included in the Skin's asset folder (see Gulp).
- Use the
<use>tag to reference icons in that file by ID (no IE support). - AccuTheme has a utility function (see /App_Code folder), example below
So if you use this:
@AccuTheme.BootstrapIcon("Star fill")You'll generate this:
<svg class="svg svg--icon bi" width="1em" height="1em" fill="currentColor" focusable="false" aria-hidden="true">
<use xlink:href="/Portals/_default/Skins/AccuTheme/dist/media/svg/bootstrap-icons.svg#star-fill"></use>
</svg>You can search and find them here, Bootstrap Icons library.
Additional notes on Bootstrap below.
Accuraty has and uses a full FontAwesome Pro license on most projects. The big difference is that (so far) they are the main ones available in 2sxc so we can make them available and useful to the client via the UI (Content-Types; text fields, use the input type: icon-picker).
[WIP]
See Resources to get it added to the project.
You can search and find them here, FontAwesome gallery
Usage... [WIP]
Bootstrap Icons have almost everything we need, but they are crucially missing social media icons. However, this is solved by continuing to have an AccuTheme SVG sprite file (we previously called this all.svg, which, yeah, was a stupid name). The benefit to having our own file is we'll have a ready-made place for custom icons.
This would be the same code snippets as above, except the function you use would be:
@AccuTheme.AccuIcon("Facebook")See the code:
- Gulp task to get Bootstrap's SVGs
- AccuTheme functions
- Example use in a Skin template
- Example use in a Razor file
In brief we use DNN skin objects (usually in _preheader.ascx) to tell DNN's page build to get the CSS item on the page and then just wire things up in to Bootstrap in src/styles/theme/_variables.scss in the Typography section.
Temporary example of a simple Intranet with on-brand fonts defined in Adobe Fonts (TypeKit).
Get the TypeKit CSS "on the page"
{theme}/includes/_preheader.ascx
Brand-define the fonts for self-documentation and get them used everywhere by Bootstrap, in this case we are setting Lato as the used-everywhere sans-serif font and then also added roboto-monospace for any pre/code needs