Support » Plugin: Gutenberg Blocks - PublishPress Blocks Gutenberg Editor Plugin » Issue with Info Note and icon alignment

  • Resolved Chuckie

    (@ajtruckle)


    Hi !
    Why is my icon showing as it is? I thought it would be centred.
    Thank you.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author htmgarcia

    (@htmgarcia)

    Hi @ajtruckle,
    it should be centered, however there could be a CSS conflict within your site.

    I noticed the CSS from your site seems merged into a single file. May you try deactivating that for a minute to check the result as a test?

    Thread Starter Chuckie

    (@ajtruckle)

    Thanks for your reply. I have just raised the query with Autoptimize authors.

    Plugin Author htmgarcia

    (@htmgarcia)

    Let us know if you need more help.

    Thread Starter Chuckie

    (@ajtruckle)

    I have had a response from my theme developer. They said:

    Generally we use :before pseudo classes for adding font icons. However the plugin authors have applied the font directly in the <i> element.

    This means we can’t hide it or do much using css, as this will hide the entire font itself.

    Then, they said:

    The font being used has the i icon set for the word 'info'.
    However if you see the attached video, the text actually is info_outline.
    The extra "_outline" part is what is causing the extra space.
    The entire info_outline text is hence an icon followed by extra space totalling to 630px =>. This is why the icon appears to be left aligned.

    This is the video:

    https://imgur.com/SgMTV4M

    They then said:

    You can see the font preview here to better understand the issue:

    https://imgur.com/knFYJLz

    Finally, they said:

    You can send the plugin authors the attached video.
    You can see that the width of the <i> element is 630 pixels => changing the text to "info" gets it down to 70px.

    I am assuming this text is coming from the plugin and not being set manually by you – hence the plugin authors either need to change the way icon fonts are inserted, or fix the icon text and remove the extra "_outline".

    I await your response.

    Thread Starter Chuckie

    (@ajtruckle)

    Further to the theme developer comments. I decided to visit the icon again in my post and in the search box typed “Info”. There was 3 listed and it was using the middle one. I changed it to the first one and now it is central and as you can see uses the word info instead of info_outline. So your second icon in the list caused the rendering issues.

    Plugin Author htmgarcia

    (@htmgarcia)

    Thanks for the detailed screencast!

    In my end info_outline works fine. Please note _outline means an icon style variation from the Material icon font by Google. Not sure if your site already uses the same font CSS through another plugin or the theme itself and this causes a conflict with the way we implement the icons in PublishPress Blocks. However if the info icon works for you, that’s a good alternative.

    Regards

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.