Any easy way of adding youtube icon to my page?

Using Ghost
1

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!

1 Like
2

Which theme you are using?

3

I’m using attila

4

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
5

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

6

image
image966×684 16.3 KB

image

image
image1285×566 23.7 KB

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

7

navigation-meta.hbs add the following code after line number #17

<li class="nav-yotube">
    <a aria-label="Youtube" href="https://youtube.com" title="Youtube" target="_blank">
  <svg width="25" height="18" viewBox="0 0 25 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.7486 2.99932C23.6105 2.4851 23.3398 2.01615 22.9635 1.63942C22.5873 1.26269 22.1187 0.991388 21.6046 0.852667C19.7124 0.34375 12.1274 0.34375 12.1274 0.34375C12.1274 0.34375 4.54236 0.34375 2.65016 0.84996C2.13588 0.988231 1.66704 1.25938 1.29072 1.63618C0.914391 2.01298 0.643832 2.48217 0.50621 2.99662C-1.03264e-07 4.89152 0 8.84375 0 8.84375C0 8.84375 -1.03264e-07 12.796 0.50621 14.6882C0.785032 15.7331 1.60796 16.556 2.65016 16.8348C4.54236 17.3438 12.1274 17.3438 12.1274 17.3438C12.1274 17.3438 19.7124 17.3438 21.6046 16.8348C22.6495 16.556 23.4697 15.7331 23.7486 14.6882C24.2548 12.796 24.2548 8.84375 24.2548 8.84375C24.2548 8.84375 24.2548 4.89152 23.7486 2.99932ZM9.71815 12.4711V5.21636L15.9984 8.81668L9.71815 12.4711Z" fill="white"/>
</svg>
 <span>Youtube</span>
    </a>
  </li>

Add following css,

li.nav-yotube svg {
    opacity: 0.8;
}

li.nav-yotube svg:hover {
    opacity: 1;
}

Final Result :

image

1 Like
8

Thanks! Now it works properly , however when the webpage is on a mobile browser such as chrome it shows on the menu slider like in this screenshot :

image
image399×688 26.7 KB

There is any way of removing this?

Again thanks for your time and help mate, really appreciate it :slight_smile:

9

Use that css

@media only screen and (max-width: 640px) {
.nav-yotube {
 display: none;
}
}
1 Like