Any easy way of adding youtube icon to my page?

Hi! I’ve seen you can add Twitter and Facebook links and they add in the top right corner real easy , i was wondering if you can do the same with YouTube or other social networks such as Linkedin or GitHub.

Thanks in advance!

Which theme you are using?

I’m using attila

Please open the file, /partials/navigation-meta.hbs
Following code working for the facebook and twitter icon,

  {{#if @site.twitter}}
  <li class="nav-twitter">
    <a aria-label="Twitter" href="{{twitter_url}}" title="{{@site.twitter}}" target="_blank">
      <i class="icon icon-twitter" aria-hidden="true"></i>
      <span>{{@site.twitter}}</span>
    </a>
  </li>
  {{/if}}
  {{#if @site.facebook}}
  <li class="nav-facebook">
    <a aria-label="Facebook" href="{{facebook_url}}" title="{{@site.facebook}}" target="_blank">
      <i class="icon icon-facebook" aria-hidden="true"></i>
      <span>{{@site.facebook}}</span>
    </a>
  </li>
  {{/if}}

Now if you want to add 3rd icon for youtube, add the following code after that,

  <li class="nav-youtube">
    <a aria-label="Youtube" href="https://youtube.com" title="Youtube" target="_blank">
      <img src ="{{asset "images/youtube.svg"}}"  alt="Youtube"/>
    </a>
  </li>

Add youtube icon in assets/images/ directory
I saw there has no any folder for images. So you should create an images folder there to keep the new icons.

To control the height of the icon add the following css in code injection area or in your theme.

.nav-youtube img {
max-height: 20px;
width: auto;
}

Note : You can get the svg icon from flaticon, iconfinder etc site

1 Like

Going to try it today , i will let you know if it worked! :smiley:

image

Did all the steps but it doesn’t seem to work , am i missing something mate?