Social icons, they are here to stay... I guess. So I want to show them. Now that I am using the Casper theme for Ghost, I also want social items in my top menu.

But I did not want to change the theme it self. At first I did, and that worked but then with every Casper Theme update I had to recode every thing. Yes yes, with a little copy paste but I did not like it.

Casper with Social Icons

So I had to come up with another solution.

Making code changes to Casper

If you want to change something to a Theme for Ghost, do remember that with every update from the creator of the Theme you will also have to recode your changes into that Theme.

Now getting social icons into The Ghost CMS Casper theme is not difficult. You can find a tutorial on Ghost itself, or on the many sites explaining on how to change Casper to your needs.

In my case I would overwrite the code by creating a new navigation.hbs template file in the partials folder.

And change this into my needs

<ul class="nav">
    {{#foreach navigation}}
        <li class="{{link_class for=(url) class=(concat "nav-" slug)}}">
            <a href="{{url absolute="true"}}">{{label}}</a>
        </li>
    {{/foreach}}
</ul>

But what if you cannot change the files or are not comfortable with creating and overwriting files on a server.

It's simple... there is a better solution.

Social icons in Casper without coding (to much)

Sorry... you still have to code! But.... not in files. The magic is happening in the backend of Ghost. The place where you also write your articles.

So Start!

Step one!

Go to -> Settings -> Design

Just fill in your links to your social profiles in Column 2!

In column one you put the handler from FontAwesom.com

copy the fab fa-whatever part from the <i /i> part

So for github it is : fab fa-github
for twitter : fab fa-twitter
Coffee? : fas fa-mug-hot

and so on, and place them in the right row.

Step two!

Go to -> Settings -> Code injection

When you are using Fontawesome, it's goot to create a free account!

At a certain point you can create a kit and a piece of code comes out. Copy it, and it will look something like this!

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

Paste this piece of code in Code injection -> Site Header

Step three!

Okay, now you will have to change the code below to your needs.

<script>
$( document ).ready(function() {
    $(".nav-fab-fa-twitter a").html('<i class="fab fa-twitter"></i>');
	$(".nav-fab-fa-linkedin-in a").html('<i class="fab fa-linkedin-in"></i>');
    $(".nav-fab-fa-github a").html('<i class="fab fa-github"></i>');
    $(".nav-fas-fa-rss a").html('<i class="fas fa-rss"></i>');
    $(".nav-fas-fa-mug-hot a").html('<i class="fas fa-mug-hot"></i>');
    $(".nav-fab-fa-digital-ocean a").html('<i class="fab fa-digital-ocean"></i>');
});    
   
</script>

You can paste the above code into : Code Injection -> Site Footer

This script does the following. When the page is loaded it looks at some classes defined in the HTML and changes is so that font awesome kicks in and changes it to icons!

You just have to change it to your needs.

So there will always be a .nav- in front of your icon class (the fa fab part) and the value of that class part has to be changed to <i class="fab fa-your_icon"></i> that is what this script does.

If you cannot handle this much code :-) don't worry! Buy me a cup of coffee! and I will help you!