Centering icons

  • Resolved rnmartinez

    (@rnmartinez)


    4 years, 11 months ago

    I am using this plugin to insert icons using the gutenberg HTML block.
    e.g. <i class=”fas fa-heart”></i>

    How can I center align this icon? I have tried
    .fas {
    color: #ffffff;
    display: inline-block;
    text-align: center;
    }

    and no luck. Any ideas? I am using it in webfont mode, but glad to use SVG if there is an easier fix.

Viewing 1 replies (of 1 total)
  • Plugin Author mlwilkerson

    (@mlwilkerson)

    Hello, a couple of tips I can offer:

    1. There was a bug in a previous version of this plugin that made centering icons like that not work. It would have only occurred when using a shortcode, though. It would not have affected use of HTML <i> tags. I’ve just released 4.0.0-rc15 of this plugin which includes a fix for this shortcode bug. You might give that a try if you’re using shortcodes.

    2. When aligning icons, such as in a list, you may need to use the fa-fw to make them “fixed width”. You can see more about that in the docs here or here.

    Generally, the best place for help with how to use the icons is the online docs, or StackOverflow.

Viewing 1 replies (of 1 total)
  • The topic ‘Centering icons’ is closed to new replies.