Using Icons outside of Theme Editor

Follow

BCNL

• September 04, 2020 20:24

Is there a way to use Flex Icons in the RTE?

I tried using a span, using the same span you would see in Chrome Developer tools, but only a space shows up, no icon. 

I must be missing something here, as it seems really silly to have a bunch of icons you can't use everywhere on the site.

0

• 

  Datsun73

  • October 22, 2020 04:09
  • Edited

  @BCNL I'm sure there is a better way but, you can use  {% assign name = 'truck' %}{% include 'icon_outline' %} -or- {% include 'icon_solid' %}

  You can use this in any file & just assign which icon using the names in icon snippet you want to use.

  0

  Comment actions Permalink
• 

  BCNL

  • October 22, 2020 15:03

  Unfortunatly, this doesn't help as I want to be able to use Icons directly in the RTE, which doesn't allow for Liquid code.

  0

  Comment actions Permalink
• 

  Datsun73

  • October 22, 2020 15:14

  Sorry misread that just copy paste this in description editor code mode and switch out the svg and data-icon attribute name as needed just literally worked for me testing it a minute ago

  <span class="icon " data-icon="truck"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>z</title><g id="truck"><path d="M26.39,65.23a5.82,5.82,0,0,0-5.73,4.88,5,5,0,0,0-.09,1v0a5.47,5.47,0,0,0,.1,1,5.82,5.82,0,0,0,11.45,0,5.47,5.47,0,0,0,.1-1v0a5,5,0,0,0-.09-1A5.84,5.84,0,0,0,26.39,65.23Z"></path><path d="M72.37,65.23a5.84,5.84,0,0,0-5.74,4.83,5.6,5.6,0,0,0,0,2,5.83,5.83,0,0,0,11.48,0,5.6,5.6,0,0,0,0-2A5.84,5.84,0,0,0,72.37,65.23Z"></path><path d="M88.13,48.94l-.27-.47-9.73-17a1,1,0,0,0-.87-.5H59V24.11a1,1,0,0,0-1-1H11a1,1,0,0,0-1,1v47a1,1,0,0,0,1,1h5.63a8.26,8.26,0,0,1-.06-1v0c0-.32,0-.64.05-1a9.82,9.82,0,0,1,19.55,0c0,.31,0,.63,0,1v0a8.26,8.26,0,0,1-.06,1H58a1,1,0,0,0,.3,0h4.29c0-.33-.05-.66-.05-1s0-.67.05-1a9.83,9.83,0,0,1,19.56,0c0,.33,0,.66,0,1s0,.67,0,1H89a1,1,0,0,0,1-1v-19ZM69.93,44a.44.44,0,0,1,.44-.43H80.91l5.48,9.32h-16a.44.44,0,0,1-.44-.44Z"></path></g></svg>

  
  </span>

  0

  Comment actions Permalink
• 

  Datsun73

  • October 22, 2020 15:15

  I do not like doing it this way as it adds a bunch of clutter but for your intended purpose it will work until we figure out a better way

  0

  Comment actions Permalink
• 

  Datsun73

  • October 22, 2020 15:16

  

  0

  Comment actions Permalink

Please sign in to leave a comment.