Hi, I installed self-hosted Ghost on Digital Ocean.
I’ve been trying to add social media icons on Dawn theme but the official guide from Ghost is based on Casper. I’m having trouble following it and ended up messing up other parts of the theme 
Any help would be appreciated.
Hey!
In your Dawn theme folder, open the partials folder, then open footer.hbs.
Presumably you want to add your social media icons before the RSS one?
If yes, add your icons RIGHT AFTER the {/if}, line 20.
For example, for Instagram:
<a class="social-item social-item-instagram"
href="https://instagram.com/your-instagram-username-here" target="_blank"
rel="noopener noreferrer" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="auto" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>
</a>
I have taken the Instagram icon from Bootstrap icons.
You may need to find your own Instagram icon to match Dawn’s style or change Dawn’s social icons and replace them with the Bootstrap ones for consistency (which is what I would do).
Hope this helps.
It worked! Your method was much more straightforward. The official guide from Ghost involved pulling the social links from the from secondary nav so it was confusing to implement.
Thank you so much!!
Hello @hkalant! Thank you for this very timely information, as I was just having the same issue with the edition theme. My trouble now is that, while your code works, if I attempt to adapt any other SVG icon other than the one you included, it only shows about a quarter of the icon. I have copied the width, height, and viewBox parameters from your code. Here’s an example:
<a class="social-item social-item-soundcloud"
href="https://soundcloud.com/your-soundcloud-username-here" target="_blank"
rel="noopener noreferrer" aria-label="Soundcloud">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="auto" fill="currentColor" class="bi bi-soundcloud" viewBox="0 0 16 16">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-14.333 15.524c-.405-.365-.667-.903-.667-1.512 0-.608.262-1.146.667-1.512v3.024zm1.333.476c-.243 0-.369.003-.667-.092v-3.792c.316-.101.465-.097.667-.081v3.965zm1.333 0h-.666v-3.778l.206.121c.091-.375.253-.718.461-1.023v4.68zm1.334 0h-.667v-5.378c.206-.154.426-.286.667-.377v5.755zm1.333 0h-.667v-5.905c.251-.027.328-.046.667.006v5.899zm1.333 0h-.667v-5.7l.253.123c.119-.207.261-.395.414-.572v6.149zm6.727 0h-6.06v-6.748c.532-.366 1.16-.585 1.842-.585 1.809 0 3.275 1.494 3.41 3.386 1.303-.638 2.748.387 2.748 1.876 0 1.143-.869 2.071-1.94 2.071z"/>
</svg>
</a>
The icon was taken from here: https://iconmonstr.com/soundcloud-3-svg/
Do you have any insight as to what I should do? Thank you again!
Hey @josephjwilk!
Sorry to hear that.
Well, in your case, you need to copy and paste the svg code from iconmonstr.com exactly, without changing it.
Try the following code:
<a class="social-item social-item-soundcloud" href="https://soundcloud.com/your-soundcloud-username-here" target="_blank" rel="noopener noreferrer" aria-label="Soundcloud">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-14.333 15.524c-.405-.365-.667-.903-.667-1.512 0-.608.262-1.146.667-1.512v3.024zm1.333.476c-.243 0-.369.003-.667-.092v-3.792c.316-.101.465-.097.667-.081v3.965zm1.333 0h-.666v-3.778l.206.121c.091-.375.253-.718.461-1.023v4.68zm1.334 0h-.667v-5.378c.206-.154.426-.286.667-.377v5.755zm1.333 0h-.667v-5.905c.251-.027.328-.046.667.006v5.899zm1.333 0h-.667v-5.7l.253.123c.119-.207.261-.395.414-.572v6.149zm6.727 0h-6.06v-6.748c.532-.366 1.16-.585 1.842-.585 1.809 0 3.275 1.494 3.41 3.386 1.303-.638 2.748.387 2.748 1.876 0 1.143-.869 2.071-1.94 2.071z"></path></svg>
</a>
If you use Dawn, it will look bigger than the default social icons, so you need to either change the default icons with icons from iconmonstr.com or play with width and height in the code above to match the size of the default icons.
Hope this helps!
Apologies, forgot to say that I only added fill="currentColor" in the code from iconmonstr.com above so that the icon matches the colour of the rest of the icons.
Thank you, that was very helpful guidance, and I was able to get it to work! I am now trying to follow the Casper theme instructions and really struggling, so I may make a new post depending on what I find in the forum. I just wanted to let you know in advance so you didn’t think I was ungrateful—just new to Ghost and trying to learn.