Introducing Font Awesome 5 and SVG icons

announcements
121

Hi, I’m dealing with some problems when dealing with the icons in my theme:

  1. To activate more FA icons, I added to my settings.yml:
svg_icons:
  default: "youtube|linkedin"
  type: "list"
  list_type: "compact"

But it doesn’t worked.

  1. I also tried to add custom icons

assets/icons.svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="i-facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.235 0H1.766C.791 0 .001.791.001 1.765v28.469c0 .976.791 1.765 1.765 1.765h15.325V19.607h-4.172v-4.828h4.172v-3.567c0-4.132 2.525-6.38 6.212-6.38 1.767 0 3.285.129 3.728.188v4.32H24.47c-2 0-2.389.961-2.389 2.361v3.081h4.779l-.62 4.84h-4.159v12.376h8.153c.977 0 1.767-.789 1.767-1.765V1.764c0-.975-.789-1.765-1.765-1.765z"/></symbol>
<symbol id="i-heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 11.04"><path d="M6 2a3.15 3.15 0 012.84-2A3.32 3.32 0 0112 3.25a3.12 3.12 0 01-.1 1.23 5.36 5.36 0 01-1.66 2.76L6 11 1.78 7.24A5.43 5.43 0 01.12 4.48 3.12 3.12 0 010 3.25 3.33 3.33 0 013.16 0 3 3 0 016 2z"/></symbol>
<symbol id="i-instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 46.1c68.4 0 76.5.3 103.4 1.5 25 1.1 38.5 5.3 47.5 8.8 11.9 4.6 20.5 10.2 29.4 19.1 9 9 14.5 17.5 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-.3 76.5-1.5 103.4c-1.1 25-5.3 38.5-8.8 47.5-4.6 11.9-10.2 20.5-19.1 29.4-9 9-17.5 14.5-29.4 19.2-9 3.5-22.6 7.7-47.5 8.8-27 1.2-35.1 1.5-103.4 1.5s-76.5-.3-103.4-1.5c-25-1.1-38.5-5.3-47.5-8.8-11.9-4.6-20.5-10.2-29.4-19.1-9-9-14.5-17.5-19.2-29.4-3.5-9-7.7-22.6-8.8-47.5-1.2-27-1.5-35.1-1.5-103.4s.3-76.5 1.5-103.4c1.1-25 5.3-38.5 8.8-47.5 4.6-11.9 10.2-20.5 19.1-29.4 9-9 17.5-14.5 29.4-19.2 9-3.5 22.6-7.7 47.5-8.8 26.9-1.2 35-1.5 103.4-1.5zM256 0c-69.5 0-78.2.3-105.5 1.5-27.2 1.2-45.9 5.6-62.1 11.9C71.5 20 57.2 28.7 43 43 28.7 57.2 20 71.5 13.4 88.3c-6.3 16.3-10.7 34.9-11.9 62.1C.3 177.8 0 186.5 0 256s.3 78.2 1.5 105.5c1.2 27.2 5.6 45.9 11.9 62.1C20 440.5 28.7 454.8 43 469c14.2 14.2 28.5 23 45.3 29.5 16.3 6.3 34.9 10.7 62.1 11.9 27.3 1.2 36 1.5 105.5 1.5s78.2-.3 105.5-1.5c27.2-1.2 45.9-5.6 62.1-11.9 16.8-6.5 31.1-15.3 45.3-29.5s23-28.5 29.5-45.3c6.3-16.3 10.7-34.9 11.9-62.1 1.2-27.3 1.5-36 1.5-105.5s-.3-78.2-1.5-105.5c-1.2-27.2-5.6-45.9-11.9-62.1-6.3-17-15-31.3-29.3-45.5-14.2-14.2-28.5-23-45.3-29.5-16.3-6.3-34.9-10.7-62.1-11.9C334.2.3 325.5 0 256 0z"/><path d="M256 124.5c-72.6 0-131.5 58.9-131.5 131.5S183.4 387.5 256 387.5 387.5 328.6 387.5 256 328.6 124.5 256 124.5zm0 216.8c-47.1 0-85.3-38.2-85.3-85.3s38.2-85.3 85.3-85.3c47.1 0 85.3 38.2 85.3 85.3s-38.2 85.3-85.3 85.3zm167.4-222c0 16.955-13.745 30.7-30.7 30.7S362 136.255 362 119.3s13.745-30.7 30.7-30.7 30.7 13.745 30.7 30.7z"/></symbol>
<symbol id="i-linkedin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27.263 27.269h-4.739v-7.425c0-1.771-.036-4.049-2.469-4.049-2.471 0-2.848 1.927-2.848 3.919v7.556h-4.739V12.001h4.552v2.081h.061c.636-1.2 2.183-2.467 4.493-2.467 4.801 0 5.689 3.16 5.689 7.273v8.381zM7.116 9.911a2.75 2.75 0 01-2.751-2.753 2.752 2.752 0 112.751 2.753zm2.376 17.358H4.74V12h4.752v15.269zM29.633 0H2.361C1.056 0 0 1.032 0 2.305v27.389c0 1.275 1.056 2.305 2.361 2.305h27.268c1.304 0 2.371-1.031 2.371-2.305V2.305C32 1.032 30.933 0 29.629 0h.004z"/></symbol>
<symbol id="i-mail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 32"><path d="M39.269 32a4.372 4.372 0 004.363-4.363V4.364A4.372 4.372 0 0039.269.001H4.363A4.372 4.372 0 000 4.364v23.273A4.372 4.372 0 004.363 32h34.906zM4.363 1.457h34.906a2.91 2.91 0 012.906 2.906v23.273a2.91 2.91 0 01-2.906 2.906H4.363a2.91 2.91 0 01-2.906-2.906V4.363a2.91 2.91 0 012.906-2.906zm17.803 19.686c1.79 0 3.468-.75 4.721-2.113L38.153 6.707a.735.735 0 00-.043-1.031.727.727 0 00-1.031.043L25.813 18.05c-1.943 2.113-5.352 2.113-7.295 0L7.235 5.71a.73.73 0 10-1.074.988l11.283 12.34c1.253 1.355 2.932 2.105 4.721 2.105zM6.698 26.938c.17 0 .349-.06.494-.187l9.92-9.059c.298-.273.315-.733.043-1.023s-.733-.315-1.031-.043l-9.92 9.042a.72.72 0 00-.043 1.023.722.722 0 00.537.247zm30.944 0a.743.743 0 00.537-.239.725.725 0 00-.043-1.023l-9.937-9.067c-.298-.273-.75-.256-1.023.043s-.256.758.043 1.023l9.928 9.059a.698.698 0 00.494.205z"/></symbol>
<symbol id="i-twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M31.939 6.092a13.31 13.31 0 01-3.767 1.033 6.613 6.613 0 002.884-3.631 13.55 13.55 0 01-4.169 1.579A6.56 6.56 0 0015.539 9.55c0 .52.06 1.02.169 1.499-5.453-.257-10.287-2.876-13.521-6.835a6.432 6.432 0 00-.888 3.3 6.56 6.56 0 002.917 5.461 6.554 6.554 0 01-2.971-.821v.081a6.564 6.564 0 005.261 6.436 6.663 6.663 0 01-2.949.113 6.582 6.582 0 006.139 4.556 13.156 13.156 0 01-8.136 2.807c-.52 0-1.039-.031-1.56-.089a18.657 18.657 0 0010.076 2.945c12.072 0 18.665-9.995 18.665-18.648 0-.279 0-.56-.02-.84 1.281-.919 2.4-2.08 3.28-3.397l-.063-.027z"/></symbol>
<symbol id="i-youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M31.327 8.273a4.026 4.026 0 00-2.756-2.777l-.028-.007c-2.493-.668-12.528-.668-12.528-.668s-10.009-.013-12.528.668A4.026 4.026 0 00.71 8.245l-.007.028C.26 10.554.007 13.176.007 15.858v.163-.008.126c0 2.682.253 5.304.737 7.845l-.041-.26a4.026 4.026 0 002.756 2.777l.028.007c2.491.669 12.528.669 12.528.669s10.008 0 12.528-.669a4.026 4.026 0 002.777-2.756l.007-.028c.425-2.233.668-4.803.668-7.429l-.001-.297v.015l.001-.31c0-2.626-.243-5.196-.708-7.687l.04.258zM12.812 20.801V11.21l8.352 4.803z"/></symbol>
<symbol id="i-blog" xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 512 511"><path d="M67.18 48.395h-.102c-5.523 0-10 4.476-10 10 0 5.523 4.477 10 10 10h.102c5.523 0 10-4.477 10-10 0-5.524-4.477-10-10-10zm0 0M116.71 48.395h-.1c-5.524 0-10 4.476-10 10 0 5.523 4.476 10 10 10h.1c5.524 0 10-4.477 10-10 0-5.524-4.476-10-10-10zm0 0M166.242 48.395h-.101c-5.524 0-10 4.476-10 10 0 5.523 4.476 10 10 10h.101c5.524 0 10-4.477 10-10 0-5.524-4.476-10-10-10zm0 0M444.309 48.395h-192.93c-5.524 0-10 4.476-10 10 0 5.52 4.476 10 10 10h192.93c5.523 0 10-4.48 10-10 0-5.524-4.477-10-10-10zm0 0M262.89 452.438a10.1 10.1 0 00-7.07 2.93c-1.86 1.859-2.93 4.44-2.93 7.07s1.07 5.21 2.93 7.07c1.871 1.86 4.442 2.93 7.07 2.93s5.212-1.07 7.07-2.93c1.868-1.86 2.93-4.442 2.93-7.07s-1.062-5.211-2.93-7.07a10.08 10.08 0 00-7.07-2.93zm0 0"/><path d="M480.23.5H31.77C14.254.5 0 14.754 0 32.27v408.398c0 17.52 14.254 31.77 31.77 31.77H221c5.523 0 10-4.477 10-10s-4.477-10-10-10H31.77c-6.489 0-11.77-5.278-11.77-11.77V116.289h472v324.379c0 6.488-5.281 11.77-11.77 11.77H303.668c-5.523 0-10 4.476-10 10s4.477 10 10 10H480.23c17.516 0 31.77-14.25 31.77-31.77V32.27C512 14.754 497.746.5 480.23.5zM20 96.285V32.27c0-6.489 5.281-11.77 11.77-11.77h448.46c6.489 0 11.77 5.281 11.77 11.77v64.02H20zm0 0"/><path d="M178.04 230.5c0-19.852-16.15-36-36-36H108.37c-5.523 0-10 4.477-10 10v104c0 5.523 4.477 10 10 10h33.668c19.852 0 36-16.148 36-36 0-10.215-4.281-19.441-11.14-26 6.859-6.559 11.14-15.785 11.14-26zm-20 52c0 8.82-7.18 16-16 16H118.37v-32h23.668c8.82 0 16 7.176 16 16zm-39.669-36v-32h23.668c8.824 0 16 7.18 16 16s-7.176 16-16 16zm0 0M206.648 194.5c-5.523 0-10 4.477-10 10v80.871c0 18.27 14.864 33.129 33.13 33.129 5.523 0 10-4.477 10-10s-4.477-10-10-10c-7.239 0-13.13-5.89-13.13-13.129V204.5c0-5.523-4.476-10-10-10zm0 0M324.867 282.29c0-19.97-16.242-36.216-36.21-36.216s-36.212 16.246-36.212 36.215 16.246 36.211 36.211 36.211c19.969 0 36.211-16.242 36.211-36.21zm-52.422 0c0-8.942 7.274-16.216 16.211-16.216s16.211 7.274 16.211 16.215c0 8.938-7.27 16.211-16.21 16.211s-16.212-7.273-16.212-16.21zm0 0M377.414 346.5c-8.937 0-16.21-7.273-16.21-16.21 0-5.524-4.477-10-10-10s-10 4.476-10 10c0 19.968 16.245 36.21 36.21 36.21 19.969 0 36.215-16.242 36.215-36.21v-48c0-19.97-16.246-36.216-36.215-36.216-19.965 0-36.21 16.246-36.21 36.215s16.245 36.211 36.21 36.211c5.828 0 11.332-1.39 16.215-3.848v15.637c0 8.938-7.274 16.211-16.215 16.211zm0-48c-8.937 0-16.21-7.273-16.21-16.21 0-8.942 7.273-16.216 16.21-16.216 8.941 0 16.215 7.274 16.215 16.215 0 8.938-7.274 16.211-16.215 16.211zm0 0M108.371 416.5H403.63c5.523 0 10-4.477 10-10s-4.477-10-10-10H108.37c-5.52 0-10 4.477-10 10s4.48 10 10 10zm0 0"/></symbol>
<symbol id="i-github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#212121" d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"/></symbol>
</svg>

about.json

"assets": {
  "icons": "assets/icons.svg"
},

And it doesn’t worked too.

The code that tries to show the FontAwesome icon is:

<svg class="fa d-icon d-icon-linkedin svg-icon svg-node" aria-hidden="true">
  <use xlink:href="#fab-linkedin"></use>
</svg>

And the custom:

<svg class="fa d-icon d-icon-facebook svg-icon svg-node" aria-hidden="true">
  <use xlink:href="#i-facebook"></use>
</svg>

I’m using theme-creator.discourse.org and when looking for the sprite, I found this:

data-svg-sprite-path="/svg-sprite/theme-creator.discourse.org/svg-3672-f683dca15466be00000f7a819b09dd65f3e78e11.js

This is the content of sprite: https://gist.github.com/derevandal/93a28cff06b4c6ae67d46381aec2bca7

And yet, inside it, there are neither type of icons.

What do I need to do to place the icon correctly?

Can anyone help me with this?

Thanks <3

2 Likes
122

I believe the variable name must be icons-sprite, see first post :arrow_up:
Uploading a sprite to a theme component using the GUI worked great for me.

4 Likes
123

I was looking for a specific icon from Font Awesome 5, but it doesn’t seem to be available in my Discourse installation (it was updated within the last week). How often do the bundled Font Awesome icons get updated?

2 Likes
124

That is a pro FA icon, you can only use it in Discourse using a plugin (core does not support non-free FontAwesome icons). You can try with this plugin though: FontAwesome Pro icons.

7 Likes
125

Thanks @pmusaraj! I’ll take a look at that plugin! :pray:

2 Likes
126

11 posts were split to a new topic: How to replace an existing SVG icon with a custom one?

137

5 posts were split to a new topic: How to use the RSS icon from Font Awesome?

142

2 posts were split to a new topic: How to use Font Awesome pulse as the loading icon?

143

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

7 Likes
144

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

10 Likes
146

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.

10 Likes
147

5 posts were split to a new topic: How to use icons in my javascript?

152

3 posts were split to a new topic: How to use Font Awesome Pro v6?

155

A post was split to a new topic: Can’t use Font Awesome from the svg icon subset icons setting in sidebar custom links

156

Huh. They make kind of a big deal about backwards compatibility so that seems surprising. Do you have a link to something listing what’s missing?

2 Likes
157

No link, sorry, just anecdote for now. I recall @pmusaraj battled with this a bit.

5 Likes
158

Have you considered Fork Awesome, a fork of the iconic font and CSS toolkit?

3 Likes
159

Not yet, but it looks quite cool, for sure. I have a feeling it would be a massive pain to backtrack and port Discourse to use its patterns.

2 Likes
160

Maybe other people here have experience switching from FontAwesome to ForkAwesome?

From their what’s new page:

We paid special attention not to change unicode codepoints for the existing icons, nor changed the CSS class names or icon names from Font Awesome 4.7. Though we added a few more icons and made the process of contributing to this project much easier. Though, if you see a mistake, please don’t hesitate to file a bug.

The examples page seems to look like FontAwesome.

Meh, this post by the (non-)maintainer seems to tell it’s a bad idea to use that at this point. Too bad.

1 Like
161

FontAwesome moved the whole “Regular” icon set to a paid plan in version 6. However, it looks like existing regular-set icons are still freely available when using the SVG icons directly (i.e. not as a web font). That’s good news for us, because we use SVG sprites from the fontawesome repo.

However, the backwards compatibility they’ve added doesn’t apply to us neatly, we don’t use FontAwesome’s “SVG + JS framework”, so we don’t benefit from the automatic aliasing. That’s probably the biggest blocker at the moment for a 5 → 6 upgrade (though it’s not as big as missing icons).

9 Likes