- This topic has 13 replies, 4 voices, and was last updated 3 years, 6 months ago by David.
-
AuthorPosts
-
November 2, 2020 at 2:48 am #1514182Victor
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.
November 2, 2020 at 2:55 am #1514183DavidSee if this helps:
discussed here!November 2, 2020 at 3:28 am #1514200VictorThanks 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!
November 2, 2020 at 7:16 am #1514433DavidStaffCustomer SupportHi there,
are you using a plugin or custom function to create the FA Shortcodes?
November 2, 2020 at 10:33 am #1514995VictorHi 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.
November 2, 2020 at 11:23 am #1515064LeoStaffCustomer SupportYou 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?
November 2, 2020 at 11:43 am #1515109VictorNovember 2, 2020 at 11:54 am #1515123LeoStaffCustomer SupportAre you referring to the check marks?
November 3, 2020 at 1:51 am #1515705VictorHi 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.
November 3, 2020 at 7:03 am #1516066DavidStaffCustomer SupportAre 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.November 4, 2020 at 5:38 am #1517525VictorHi David!
No, I am using the classic editor.
But maybe all this code is too difficult for me… hahaha.
Thanks!
November 4, 2020 at 8:18 am #1517902DavidStaffCustomer SupportIn 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
November 4, 2020 at 8:44 am #1517948VictorOh, that’s perfect David, now it works perfectly, thank you very much!!
November 4, 2020 at 8:45 am #1517950DavidStaffCustomer SupportGlad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.