Social icons in Ghost Casper Theme

Putting social icons in the Casper theme is easier as you think. You don't have to change code or rewrite the theme. You can do it all in the backend

Social icons in Ghost Casper Theme

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.

Ghost Casper Social Icons
Extra 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

Ghost Casper Theme social icons
copy the fab fa-whatever part from the <i /i> part

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

In column one you put the handler from FontAwesom.com

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

Ghost social icons in Caspar Theme

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.

More social icons in Casper Ghost

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.