Any easy way of adding youtube icon to my page?

Using Ghost
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