Introducing Font Awesome 5 and SVG icons

(Paul W) #67

how do i
add the icon to the svg icon subset site setting

Here’s what I’ve got:

api.decorateWidget('header-icons:before', helper => {
    return [
        helper.h('li', [
            helper.h('a#home-button.icon', {
                href: '/',
                title: 'McRides Home'
            }, iconNode('home')),
        ]),
        helper.h('li', [
            helper.h('a#weather-button.icon', {
                href: 'https://www.mcrides.co.nz/t/weather-forecast/77',
                title: 'Weather Forecast'
            }, iconNode('cloud-sun')),
        ])
    ];
});

the home icon works, the cloud-sun (I also tried cloud) doesn’t

0 Likes

#68

Search for the setting svg icon and type the name of the icon with the right prefix

image

fa-cloud or fa-cloud-sun and it should work after a refresh of the page

3 Likes

#69

Does this mean that Discourse still ships with Font Awesome even though it uses SVG icons ?

0 Likes

(Jeff Atwood) #70

Font Awesome is itself SVG in V5

1 Like

#71

So v 2.2 does come with FA pre loaded ? I thought you skipped it for its size.

0 Likes

(Vinoth Kannan) #72

You should check our release topic to know more about included features in version 2.2. Also the blog post.

3 Likes

#73

I read it. It says about dropping the font icon.

We’ve also fully converted to SVG icons instead of relying on a font icon. This is more efficient than shipping a giant and mostly unused icon font. Plus, it’s now much easier to switch any visible icon in Discourse with something else, even a completely custom one-off glyph that you created.

Prefer to use your custom logo instead of the default like heart? Make it so!

0 Likes

(Vinoth Kannan) #74

Yes, we moved to SVG icons instead of fonts. But that doesn’t mean we skipped Font Awesome :wink:.

3 Likes

#75

I see. So you are using FA as SVG images ? I never knew we can extract them individually.

0 Likes

(Paul W) #76

Thanks !
I didn’t even know it was there :slight_smile:

0 Likes

(Chi Duc) #77

Anybody can help?
I need to replace this code to svg:
<i class="fa fa-long-arrow-left" aria-hidden="true"></i>
Thank you so much!

0 Likes

(Taylor) #78

That specific icon has been removed from the list of free font awesome icons. The closest equivalent is long-arrow-alt-left. If you are limited to using HTML, you would use:

<svg class="fa d-icon d-icon-long-arrow-alt-left svg-icon svg-node" aria-hidden="true">
  <use xlink:href="#long-arrow-alt-left"></use>
</svg>

You will also need to add long-arrow-alt-left to the svg icon subset site setting.

8 Likes

(Chi Duc) #79

Thanks @tshenry
You are so awesome :smile:
I tried to use long-arrow-alt-left, it worked well.
But can you tell me more if I still want to use long-arrow-left.

1 Like

(Taylor) #80

Unfortunately, as I mentioned above, that icon is not available in the free tier of Font Awesome icons. If long-arrow-alt-left will not work for you, I think your best option might be to create your own version and use a plugin as described in the post above.

8 Likes

(Chi Duc) #81

oh, I see :joy:
Thanks @tshenry so much!

1 Like

(Leo McArdle) #82

The wording here could be clarified. I originally thought this meant doing this:

globe_icon: true
building_icon: true

But what it actually means is doing this:

_icon: "globe|building"

Indeed, the setting name needn’t end in _icon but just has to include that string somewhere in its name:

4 Likes

(Penar Musaraj) #83

Thanks, I have updated the OP.

5 Likes

(jrgong) #84

Are there any plans to add Fontawesome Pro support?

0 Likes

(Penar Musaraj) #85

No, not in core, because Pro needs a per-site license. However, you can easily add it to your own site through a plugin: simply load an svg sprite with Pro icons and register the icons you need to use. The is all documented in the original post.

11 Likes

(Taylor) split this topic #86

2 posts were split to a new topic: Where can I find a list of icons used by Discourse?

0 Likes