[Resolved] Customize Font Awesome icons

[Victor]

Hello,

I am using the Font Awesome Icons introducing icons with shortcodes.

Please, do you know how could I customize the color and size of icons?

For example, I have tried with the shortcode [icon name=”thumbs-up” style=”color:#1e73be”], but the color does not change, it continue appearing in black color. And how could I modify the size of the icon?

A lot of thanks.

[David]

See if this helps:
discussed here!

[Victor]

Thanks David, but I’m working with Shortcodes, and the discussion talks about HTML elements… my knowledge is basic, I don’t know modify that.

Do you know how could I change color and size with shortcode?

Thanks!

[David]

Hi there,

are you using a plugin or custom function to create the FA Shortcodes?

[Victor]

Hi David! I have installed two plugins: Font Awesome and Shortcodes Ultimate.

I add the shortcode [icon name=”thumbs-up”] and it works perfectly, butI would like to change the size and color of the icon, and I don’t know how to do it.

A lot of thanks.

[Leo]

You will likely need to check with the plugin support on this.

Can you link me to the page in question so I can make sure the font size is set from the theme?

[Victor]

Hello Leo,

The website is https://maltesbichon.com/.

Thanks.

[Leo]

Are you referring to the check marks?

[Victor]

Hi Leo,

No, the green check marks are emojis.

I was adding the shortcode [icon name=”thumbs-up”] and it worked good, but now don’t appear the icons.

[David]

Are you using the Block Editor ?
If so you could use the GenerateBlocks plugin and the Headline Block.

https://wordpress.org/plugins/generateblocks/

It allows you to add an inline SVG that you can use size and color within the block settings.
More info here:

https://docs.generateblocks.com/article/headline-overview/

Here is the SVG for the thumbs up icon:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="thumbs-up" class="svg-inline--fa fa-thumbs-up fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M104 224H24c-13.255 0-24 10.745-24 24v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V248c0-13.255-10.745-24-24-24zM64 472c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zM384 81.452c0 42.416-25.97 66.208-33.277 94.548h101.723c33.397 0 59.397 27.746 59.553 58.098.084 17.938-7.546 37.249-19.439 49.197l-.11.11c9.836 23.337 8.237 56.037-9.308 79.469 8.681 25.895-.069 57.704-16.382 74.757 4.298 17.598 2.244 32.575-6.148 44.632C440.202 511.587 389.616 512 346.839 512l-2.845-.001c-48.287-.017-87.806-17.598-119.56-31.725-15.957-7.099-36.821-15.887-52.651-16.178-6.54-.12-11.783-5.457-11.783-11.998v-213.77c0-3.2 1.282-6.271 3.558-8.521 39.614-39.144 56.648-80.587 89.117-113.111 14.804-14.832 20.188-37.236 25.393-58.902C282.515 39.293 291.817 0 312 0c24 0 72 8 72 81.452z"></path></svg>

Once you created one headline block you can simply duplicate it as many times as you need.
Plus side is there is no shortcode rendering or additional icon fonts to load.

[Victor]

Hi David!

No, I am using the classic editor.

But maybe all this code is too difficult for me… hahaha.

Thanks!

[David]

In that case, this doc here explains how to add FA Icon Lists:

https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list

[Victor]

Oh, that’s perfect David, now it works perfectly, thank you very much!!

[David]

Glad to be of help

[Author]

Posts