Add LinkedIn and other Social Media Icons

Using Ghost
1

Hello All,

I am working on creating my Blog. I am making an authors / About Us page. Is there a way to add LinkedIn and other social media icons with links on them to our social media sites?

I honestly have no knowledge on how to do most of this stuff. So any help will be great.

Thank you.

2

can you provide me a site here so I can check, maybe its a web 2.0

3

Hi there,

I used this guide and all worked fine: How to add social media icons to your Ghost theme

However, I now wonder how to add the icon of Meta’s Threads. Can anyone help?

Thanks in advance!

4

You’d need to visit the Font awesome site (linked from the tutorial above) and find the Unicode for Threads.

1 Like
5

Yes, logical :D Thank you.
However, the icon does not appear as intended:

Screenshot (31)
Screenshot (31)1920×588 116 KB

6

Here is my code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
.gh-foot-menu .nav-twitter a,
.gh-foot-menu .nav-instagram a,
.gh-foot-menu .nav-linkedin a,
.gh-foot-menu .nav-github a,
.gh-foot-menu .nav-mastodon a,
.gh-foot-menu .nav-threads a {
  font-size: 0 !important;
}
  
.gh-foot-menu .nav-twitter a::before,
.gh-foot-menu .nav-instagram a::before,
.gh-foot-menu .nav-linkedin a::before,
.gh-foot-menu .nav-github a::before,
.gh-foot-menu .nav-mastodon a::before,
.gh-foot-menu .nav-threads a::before {
  font-family: "Font Awesome 6 Brands";
  display: inline-block;
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
</style>
<style>
.gh-foot-menu .nav-twitter a::before {
  content: "\f099";
}
.gh-foot-menu .nav-instagram a::before {
  content: "\f16d";
}
.gh-foot-menu .nav-linkedin a::before { 
    content: "\f08c";
}
.gh-foot-menu .nav-github a::before { 
    content: "\f09b";
}
.gh-foot-menu .nav-mastodon a::before {
  content: "\f4f6";
}
.gh-foot-menu .nav-threads a::before {
  content: "\e619";
}
</style>

 <script>
	var links = document.querySelectorAll('a');
	links.forEach((link) => {
		var a = new RegExp('/' + window.location.host + '/');
		if(link.href.indexOf("javascript") == -1){
			if(!a.test(link.href)) {
				link.addEventListener('click', (event) => {
					event.preventDefault();
					event.stopPropagation();
					window.open(link.href, '_blank');
				});
			}
		}
	});
</script>
7

Try using this newer version of font-awesome’s css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/brands.min.css