Introducing Font Awesome 5 and SVG icons

So I tried again and added the ‘piggy-bank’ icon to the SVG Icon subset. I added the JS into the Header again and referenced ‘Piggy-Bank’ and it finally worked properly! Thx! Now the only problem with that particular icon is that both liked posts and unliked posts look exactly the same, there is no outline version for unliked posts. Upon loading up the Font Awesome site again I noticed that the outlined versions of the icon are PRO. So that kills that idea. I’m not about to spend a hundred a year for 1 icon, we are non-profit and don’t charge for membership.

SO I guess I’m back to creating my own icon. I’ll check out those directions again.

2 Likes

Did you add both of them? (I haven’t done what you’re doing, so this also may not help). There is a theme component that makes like a thumbs up, so you might check that to see that you’re adding all the stuff you need to change the like. (or maybe that icon just can’t work)

1 Like

Ok, so I’ve tried some things to create my own. Unfortunately, the link to see an example of how the SVG Sprites file should be formatted inthe OP is just a blank page, it doesn’t load. So I winged it. I created both my SVGs in Illustrator, exported, then threw them into Chrome to ‘Inspect element’ to get the Path file info.

I’m on a Mac, so I opened textEdit and copied the info in there that I think is supposed to be in the Sprite file. Then changed the extension to svg. Uploaded it to theme and added the js code into Header.

Again not sure if any of this is right and pretty sure it isn’t since when I preview the theme for the site it completely crashes it. I get the Ooops Error-" The software powering this discussion forum encountered an unexpected problem." After I remove the icons-Sprite svg that was uploaded and wait a bit the site loads correctly again.

Below is the svg info in file and the json code.

Thanks!

Here’s the Sprite file on Google drive if anyone cares to take a look - Drive

And the code -
Screen Shot 2021-03-19 at 4.32.51 PM

1 Like

You shouldn’t add icons-sprite twice.

Can you post the SVG paths in a code block? I think you’re running into issues putting the icons in a sprite, I can help with that.

5 Likes

Thanks! Is this what you’re looking for?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- ViewBox and Polygon taken from "SVGpig.svg" -->
  <symbol id=“ids-SVGpig” width="616px” height="425px”  viewBox="0 0 616 425">
    <path xmlns="http://www.w3.org/2000/svg" fill="#060709" d="M184.131,400.155c2.827,0.205,3.614-5.244,7.953-7.232c4.652-7.228,0,0,7.627-10.233    c-0.112,0.04,6.764-6.983,6.651-6.942c6.519-17.718,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456    c2.529-0.931,3.49,2.748,4.203,4.525c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-6.405,14.642-5.161,22.4    c4.807-0.332,19.038,0.231,23.851,0.298c2.355-7.332,1.213-5.049,4.524-12.042c0.322-0.68,4.927-10.54,5.377-10.93    c4.667-11.476,9.501-22.896,14.743-34.119c5.729,11.479,7.265,24.374,9.339,36.882c-0.092,0.01-0.183,0.021-0.275,0.03    c3.219,10.044-1.754,20.419-0.559,30.879c8.474,0.214,23.744-0.615,32.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C62.018,74.314,54.998,90.515,40,97.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,18.703-53.914,20.5-60.062    c0.033,6.355-15.454,62.01-17,68 M77.21,126.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C86.532,113.189,82.366,121.266,77.21,126.644z"/>
  </symbol>

  <!-- ViewBox and Polygon taken from “SVGpigout.svg" -->
  <symbol id=“ids-SVGpigout”  width="621px" height="430px" viewBox="0 0 621 430">
    <path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#060709" stroke-width="8" stroke-miterlimit="10.43" d="M167.5,399.499L194,405    c2.827,0.205,1.084-10.077,1.084-10.077s0,0,7.627-10.233c-0.112,0.04,6.651-6.942,6.651-6.942    c8.885-18.201,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456c2.529-0.931,3.49,2.748,4.203,4.525    c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-5.405,17.642-4.161,25.4c4.807-0.332,17.453-2.001,22.266-1.935    c2.355-7.332,1.798-5.816,5.109-12.81c0.322-0.68,4.927-10.54,5.377-10.93c4.667-11.476,14.743-34.119,14.743-34.119l9.339,36.882    l-0.275,0.03c0,0,0.246,20.419,1.441,30.879c8.474,0.214,21.744-0.615,30.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C65.018,76.314,57.998,92.515,43,99.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,12.203-34.414,14-40.562    c0.033,6.355-14,46.666-7,49.999 M80.21,128.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C89.532,115.189,85.366,123.266,80.21,128.644z"/>
  </symbol>


</svg>
1 Like

Discourse Gifs ships a custom GIF icon that you can use as an example:

https://github.com/discourse/discourse-gifs/blob/main/assets/gif.svg?short_path=61c0681

7 Likes

Ok, try using this: Dropbox - discourse-custom-icons.zip - Simplify your life

I only added the replaceIcon call for d-liked, you’ll have to edit the component in your instance and add the other lines. Make sure you use the IDs in the svg file, now they are simply SVGpig and SVGpigout.

8 Likes

Awesome! Thank you, that worked I got it up and running. My community appreciates it. Thanks so much!!

Screen Shot 2021-03-25 at 12.29.27 PM

6 Likes

Hello,

Is the rss icon available in Discourse? And if yes, which prefix I need to use?

Thanks.

1 Like

Yes, the rss icon is available, you can add rss or rss-square to the svg icon subset site setting to user either of the two icons.

4 Likes

Thanks, Penar for your answer.

I added it to svg icon subset site setting and then I am trying to use it in a component with
iconNode('fa-rss') but it doesn’t show.

It works with other icons (twiiter, github, etc) but not this one.

Untitled

1 Like

Did you try iconNode('rss')?

4 Likes

Oh, yes. It is working now.

Thanks a lot :slight_smile:

3 Likes

It is possible to make the Font Awesome spinner spin by adding fa-pulse?

Code from Font Awesome:

<i class="fas fa-spinner fa-pulse"></i>

I am not sure where to add fa-pulse on Discourse. Spinner that doesn’t spin on Discourse:

<svg class="fa d-icon d-icon-spinner svg-icon svg-node"><use xlink:href="#spinner"></use></svg>

Thank you!

1 Like

Is there a plan to upgrade Font Awesome to version 6?

5 Likes

Good question, we don’t currently have a plan to upgrade to Font Awesome 6, but we will look into it shortly.

7 Likes

Did you check out this TC?:

3 Likes

I have seen quite a few places stick with font-awesome 5 cause the set in 6 was missing some stuff (that is now in paid tiers).

Not against upgrading though, just something to be mindful of.

8 Likes

I don’t understand where I should add all those lines
On my server, I can’t find where my theme directory is.

1 Like

Hello and welcome @Apocal :slight_smile:

Are you trying to add an icon to a theme component, or similar?

1 Like