I love the FontAwesome library and use it on many projects. I was a huge fan of FontAwesome 4.0 and had a little struggle moving over to using 5.0 + 6.0 in my projects. I was use to the old way of including the link to the CSS files and using the class names. You can still do that if you wish but this article shows using the React component approach. It’s simple once you’ve done it a few times.

Install React Font Awesome

npm i –save @fortawesome/react-fontawesome

Install the Core Packages [required]

npm i --save @fortawesome/fontawesome-svg-core

Install the Icon Packages, use only the ones you need. If you only use solid icons then choose that. If you are not sure right now then you can include them all and remove them later.

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

Go Find a Font – https://fontawesome.com/icons

Keep in mind that you only have the free library so you can only use those unless you buy the pro license

If you pick an icon and it says ‘Start Using this Pro Icon’ then you need to choose something else or purchase a license

You can filter the free ones by clicking this on the left.

I’ve selected the fish icon, next you need to take note of the type ‘Solid’ or ‘Regular’

Now import the FontAwesomeIcon component and the icon you want from the correct package

This fish icon is in the Solid package.

If I wanted to use something from the regular package like this icon

This font is in ‘Regular’ package you would import it from that package instead

There is intellisense inside visual studio to help get the correct name of the icon

Now the result

If you wanted to use the brand icons you would follow the same approach. I believe that all the brands icons are free.

I love FontAwesome library of icons and use them in many projects. The PRO version unlocks so many more fonts and customizations that it’s worth buying if you plan to use them and want to support this project.

Introduction

This new project is a nice little feature that you can easily add to your SharePoint site to enable site messages or alerts. Having the ability to display site alerts is one of the top 10 most requested features to enhance SharePoint. This customization is built as an SPFx application customizer, with a little bit of UI hacking. This project can be used as-is or as a starting point for you to extend and create your own combinations of notifications, icons and colors.

Overview

The Alerts Header solution contains an SPFx application customizer and a list schema for the alerts messages. The list will automatically be created for you when the app is added to your site. Currently the app displays messages from the site it’s in but could be easily modified to pull notifications from another site. Initially this was designed to be deployed the the entire intranet and activated on each site. Each site had the option to display ‘local’ alerts, alerts contained within the site and remote alerts, alerts contained at the root site collection “/”. The remote alert functionality has been commented out for simplicity in the Git Hub repo but could be reenabled with just a little effort.

Implementation

The List

The solution installs an ‘Alerts’ list in your site. This list contains a number of required fields to properly display the alerts.

Title – The first part of the text that is displayed

Description – The second part of the text that is displayed. The description will fill the reminder of the space and truncate with ‘…’

Alert Type – The icon that is displayed. Warning, Actionable or Info as show below from top to bottom.

Link – The navigation url and the text that will be displayed

Start Date / Time – The date and time that the alert will be displayed

End Date / Time – The date and time that the alert will no longer be displayed

Items will immediately start to show up once they are added to the list and hit the duration between the start and end date.

The Web Part

This view below shows the alerts application customizer with all three types of alerts and active.

Icons – The icons used are from the Font Awesome 5.0 free library. You could easily update the code to change out the icons.

Expand / Collapse – If the alert has a long description it will be truncated once it fills the available screen space. The up / down arrow will allow the user to expand and collapse the alert to read the full description.

Dismiss / Close – The alert has and close icon at the far right to dismiss the alert. The alert will no longer show during that session. A new session will display the alert again. New Tabs are equivalent to new sessions.

SharePoint UI Hack – I hinted earlier that I’ve included a bonus UI Hack for free, haha. Take a peek at the picture below. The normal location of an application customizer is at the very top of the page. I did not want the alerts to show up there so I opted to move them to the bottom of the header. This is a non supported customization according to Microsoft. I’m pointing this out for transparency.

Responsive / Mobile Friendly – The web part was designed with the intention of working across all devices and screen sizes. The functionality is somewhat different on the mobile. Once the item is expanded it can only be closed. I’ve do it this way to intentionally close them out to regain the screen real estate back on the small devices.

Customizations

The web part comes with a few notification types. You can add more types directly to the list or to the list schema. After you add new Alert Types you would then need to do a few more updates

IAlerts.types.ts – Add your new Alert Types to the enumeration

AltertItem.tsx – Add new conditions for the new Alert Types and the icon you want to use

AlertItem.module.scss – Copy / Paste an existing Alert Type combination and change the colors to meet your needs.

Conclusion

Site Alerts are one of the top 10 features requested from clients and customers to build. I’m happy to be able to post this feature to share even though it’s not 100% Microsoft compliant. The tiny UI hack positions this feature in the location where I felt it belongs. I hope and wish that Microsoft would give us more Zones in which we could target in the application customizers.

The draw back is that it’s removed for the whole site. Maybe you just want it gone on one page. Well in that case you’ll have to use CSS to do that. For the one page approach I would add a Modern Script editor to the page.

Immediately after removing the left navigation, depending on your screen size, you will notice that the screen does not go full width. This would also need to be fixed with injecting CSS either through the page or into the entire site via Application Customizer.

Microsoft doesn’t recommend modifying their CSS but they almost give us no choice. For now I’ll leave you with the CSS that works (for now) to update these zones. You’ll need to use one of the two methods above to implement this on Modern pages.

// Trimming Left Navigation
#spLeftNav { 
 display: none;
}

// Full Screen CSS
.CanvasComponent.LCS .CanvasZone {
 //there is a max width on this set to 1268px, we'll make it 100%
 max-width: 100%;
}

Option 1 [Only Publishing Enabled]
+Alternative CSS URL

Pros:
No special tools needed other than the browser of choice.
Very easy to attach a file using the interface.
The CSS can be applied to every sub site under
Different CSS can be applied per site

Cons:
Can only link 1 file in this slot. Once it’s used you can’t link anymore.
Manual process, not scriptable or repeatable.

From Site Settings

Under Look and Feel, Click on Master Page

At the bottom, Expand Alternate CSS URL, Click Specify a CSS file to be used, locate a CSS file to attach, then Click OK

Option 2 [Not Recommended]
+Using Content Editor / Script Editor Web Parts (CEWP)

Pros:
Quickly add CSS / JavaScript to a page by directly copy/paste into these web parts.

Cons:
Works only on that particular page, not a global solution.
If you accidentally delete the web part, you will lose your customizations. (not if you host the customizations in an external files and link it as content source (CEWP only))
Manual process, not scriptable or repeatable.

Option 3 [Best for Multiple Environments / Repeatable / Scriptable]
+Using SharePoint PnP

Add-PnPJavaScriptBlock – used to add a block of JavaScript to execute
Add-PnPJavaScriptLink – used to add links to JavaScript file

Below is some PowerShell PnP used to attach CSS and JavaScript files. In order to reference CSS you must load it via JavaScript. To do that I’ve borrowed some JavaScript that the PnP JS library uses. You can download that here


## CSS FILES
Add-PnPJavaScriptLink -Name "loadStyles" -Url "$($configObject.siteUrl)/Style Library/js/cssLoader.js" -Sequence 0 -Scope Site
Add-PnPJavaScriptBlock -Name "googleFonts" -Script "cssLoader.loadStylesheet(`"https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Condensed:400+700|Alegreya+Sans+SC`", false);" -Sequence 1
Add-PnPJavaScriptBlock -Name "fontAwesome" -Script "cssLoader.loadStylesheet(`"$($configObject.siteUrl)/Style Library/vendor/font-awesome/css/font-awesome.min.css`", false);" -Sequence 1
Add-PnPJavaScriptBlock -Name "styles" -Script "cssLoader.loadStylesheet(`"$($configObject.siteUrl)/Style Library/css/styles.css`", true);" -Sequence 2
## JS FILES
Add-PnPJavaScriptLink -Name "jQuery" -Url "$($configObject.siteUrl)/Style Library/vendor/jQuery/jquery-3.2.1.min.js" -Sequence 0 -Scope Site
Add-PnPJavaScriptLink -Name "moment" -Url "$($configObject.siteUrl)/Style Library/vendor/moment/moment.min.js" -Sequence 1 -Scope Site
Add-PnPJavaScriptLink -Name "resize" -Url "$($configObject.siteUrl)/Style Library/vendor/resize/jquery.ba-resize.min.js" -Sequence 1 -Scope Site


Pros:
Easy to apply JavaScript to your site (takes a little bit more for CSS).
Builds a repeatable method to attach JavaScript & CSS to your site. Great for repeatable process and source control (as you can store these files)
You can use the C# PnP or PowerShell PnP

Cons:
Takes a little bit more than 1 command, need to establish a connection.
Need to be comfortable using powershell or C#.
Need to have the powershell modules installed.
No native command to attach CSS, they recommend using JavaScript to attach CSS.

Option 4 [My Favorite for Quick & Easy Applications]
+SP-Editor / Chrome Only

Download SP Editor plugin from the Chrome Store

Once you have the plugin installed and navigated to your SharePoint site, hit F12 to open the developer tools bar.

Click on the SharePoint tab and then click ScriptLinks. Here you can enter the sequence number to order your CSS references or JavaScript links. You also enter a site collection relative url from JavaScript only. After you enter that information, Click on the Add ScriptLink dropdown and select either current web or site collection

Pros:
Super Fast & Easy
Quickly apply CSS or JavaScript to a site or web (sub site) using the browser

Cons:
Requires Chrome [only a con if your organization doesn’t allow you to have Chrome]
Manual process, not scriptable or repeatable.

Where do you put this? There are a number of places that you can put it. The best option would be in the Alternate CSS file [I’m going to get around to posting this cause I haven’t found a great article explaining this to newcomers]. You could also just add it to the MasterPage but that’s not the cleanest method.

Hide Newsfeed

Before:

CSS Snippet:

/* Hiding Newsfeed */
.o365cs-nav-appTile[id='O365_AppTile_Newsfeed'] {
	display: none;
}

After:

Hide OneDrive

Before:

CSS Snippet:

/* Hiding OneDrive */
.o365cs-nav-appTile[id='O365_AppTile_Documents'] {
	display: none;
}

After:

Hide Sites

Before:

CSS Snippet:

/* Hiding Sites */
.o365cs-nav-appTile[id='O365_AppTile_Sites'] {
	display: none;
}

After:

Bonus

After you hide 2 items you’ll get a space like this. Add the next line of CSS to tighten it up.

CSS Snippet:

/* To remove the minimum width off the size of the box */
.o365cs-rsp-off.o365cs-newAL-off.o365cs-nav-navMenu {
	min-width: 0;
}

After:

Hide all 3 – Newsfeeds, OneDrive, & Sites + remove the min width of the box

CSS Snippet:

.o365cs-nav-appTile[id='O365_AppTile_Newsfeed'],
.o365cs-nav-appTile[id='O365_AppTile_Documents'],
.o365cs-nav-appTile[id='O365_AppTile_Sites'] {
	display: none;
}

.o365cs-rsp-off.o365cs-newAL-off.o365cs-nav-navMenu {
	min-width: 0;
}

Thanks for reading!

Horizontal Alignment

.ms-alignRight
{
    text-align:right;
}
.ms-alignLeft
{
    text-align:left;
}
.ms-alignCenter
{
    text-align:center;
}

check it out in Plunker

Vertical Alignment

I found it odd that they don’t have a vertical-align: bottom;

.ms-verticalAlignTop
{
    vertical-align:top;
}
.ms-verticalAlignMiddle
{
    vertical-align:middle;
}
.ms-verticalAlignBaseline
{
    vertical-align:baseline;
}

check it out in Plunker

Position

I noticed that they have absolute listed twice in the “CORE” css files

.ms-positionRelative
{
    position:relative;
}
.ms-positionAbsolute
{
    position:absolute;
}

check it out in Plunker

Float

.ms-floatRight
{
    float:right;
}
.ms-floatLeft
{
    float:left;
}

check it out in Plunker

Display

.ms-displayBlock
{
    display:block;
}
.ms-displayInline
{
    display:inline;
}
.ms-displayInlineBlock
{
    display:inline-block;
}

check it out in Plunker

Table

I use this one the most and I absolutely love it. Only caveat is that you cannot specify columns, it’s a very strict table. If you need to split a cell then you would have to put in an entire new table. This is used to turn ‘div’s into table like objects for positioning and to control the display. I also typically pair this with the vertical positioning. You can see Microsoft use this in #s4-titlerow.

.ms-table
{
    display:table;
}
.ms-tableRow
{
    display:table-row;
}
.ms-tableCell
{
    display:table-cell;
}

check it out in Plunker

General

.ms-hide
{
    display:none;
}
.ms-visibilityHidden
{
    visibility:hidden;
}
.ms-clear
{
    clear:both;
}

check it out in Plunker

Text

They don’t many sizes to work with here

.ms-textXLarge
{
    font-family:"Segoe UI Semilight","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size:1.46em;
}
.ms-textLarge
{
    font-family:"Segoe UI Semilight","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size:1.15em;
}
.ms-textSmall,
.ms-textXSmall
{
    font-size:.9em;
}
.ms-bold
{
    font-weight:bold;
}
.ms-italic
{
    font-style:italic;
}
.ms-smallIndent
{
    margin-left:20px;
}
.ms-indent
{
    margin-left:25px;
}

check it out in Plunker

Text Wrapping

.ms-noWrap
{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ms-forceWrap
{
    word-wrap:break-word;
}
.ms-normalWrap
{
    white-space:normal;
    word-wrap:normal;
}

check it out in Plunker

Sizing

.ms-fullWidth
{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    width:100%;
}
.ms-fullHeight
{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    height:100%;
}
.ms-fillBoxFull
{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    height:100%;
    width:100%;
}
.ms-fillBox
{
    height:100%;
    width:100%;
}

check it out in Plunker

Lists

.ms-noList ul,.ms-noList ol,.ms-noList
{
    list-style-type:none;
    padding-left:0px;
}

check it out in Plunker

Padding/Margin

put this on your items that you want to eliminate padding or margin

.ms-padding0
{
    padding:0px;
}
.ms-margin0
{
    margin:0px;
}

Cursor

If you have an actionable ‘div’ tag or element other than an ‘a’ tag and you want to set the cursor to look like a link

.ms-cursorDefault
{
    cursor:default;
}
.ms-cursorPointer
{
    cursor:pointer;
}

check it out in Plunker