Ghost font awesome links on secondary menu

It is possible to customize the second menu within your Ghost blogs, I discovered it a while ago. Here is a small summary of customization with font awesome icons. For more details, you can read this article.

Add font awesome

• go in settings section > code injection
• add fontAwesome in site header

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

Add custom navigation.hbs

• go in design section and download the theme
• add a "navigation.hbs" file in partial (it will overwrite normal navigation)

{{#if isSecondary}}
    <!-- secondary navigation -->
    <ul class="nav" role="menu">
        {{#foreach navigation}}
            <li class="nav-{{slug}}" role="menuitem">
                <a href="{{url}}" class="social-link"><i class="fab fa-{{slug}}" aria-hidden="true"></i></a>
            </li>
        {{/foreach}}
    </ul>
{{else}}
    <!-- primary navigation -->
    <ul class="nav" role="menu">
        {{#foreach navigation}}
            <li class="{{link_class for=(url) class=(concat "nav-" slug)}}" role="menuitem">
                <a href="{{url absolute="true"}}">{{label}}</a>
            </li>
        {{/foreach}}
    </ul>
{{/if}}

Add an item to the menu

• go in the design section > secondary navigation
• add an item with font awesome code in the label (the second part of a fa class fa-slack -> slack)