Blog, Website & Page Publishing

tom-melle
Participant

Add link to icon

SOLVE

There ares modules (both in theme and general) to add an icon to your page. But this does not have any option, as far as I can tell, to add a hyperlink.

 

Any suggestions on how to make either an icon linkable or another approach to this? I added an image of what I want to achieve (lower right corner):

tommelle_0-1685607100534.png

 

0 Upvotes
1 Accepted solution
Jake_Lett
Solution
Guide | Partner
Guide | Partner

Add link to icon

SOLVE

@tom-melle I assume you want the LinkedIn icon. One approach you could take is to add a rich text box and then open the source code view. Then paste in the code below.

 

<a href="https://www.linkedin.com/in/jacoblett/" style="display:block;background:#fff;border-radius:50%;width:60px;height:60px;line-height:55px;text-align:center;">
   <svg style="vertical-align:middle;" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
  <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
</a>

 

Hope this helps.

 

View solution in original post

0 Upvotes
1 Reply 1
Jake_Lett
Solution
Guide | Partner
Guide | Partner

Add link to icon

SOLVE

@tom-melle I assume you want the LinkedIn icon. One approach you could take is to add a rich text box and then open the source code view. Then paste in the code below.

 

<a href="https://www.linkedin.com/in/jacoblett/" style="display:block;background:#fff;border-radius:50%;width:60px;height:60px;line-height:55px;text-align:center;">
   <svg style="vertical-align:middle;" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
  <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
</a>

 

Hope this helps.

 

0 Upvotes