[Resolved] Customize Font Awesome icons

Home Forums Support Customize Font Awesome icons

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1514182
    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.

    #1514183
    David

    See if this helps:
    discussed here!

    #1514200
    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!

    #1514433
    David
    Staff
    Customer Support

    Hi there,

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

    #1514995
    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.

    #1515064
    Leo
    Staff
    Customer Support

    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?

    #1515109
    Victor

    Hello Leo,

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

    Thanks.

    #1515123
    Leo
    Staff
    Customer Support

    Are you referring to the check marks?

    #1515705
    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.

    #1516066
    David
    Staff
    Customer Support

    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.

    #1517525
    Victor

    Hi David!

    No, I am using the classic editor.

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

    Thanks!

    #1517902
    David
    Staff
    Customer Support
    #1517948
    Victor

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

    #1517950
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.