Space after inserting a line-break

  • Resolved Artan

    (@artankrasniqi1988)


    7 years, 4 months ago

    Hi guys,

    there´s a sucking problem I can´t get rid of.

    Explanation:

    I created a table of 1 row and 4 columns. In every column is an icon of Font Awesome. I enter a line-break directly after the icon to put a word under it. TinyMCE does the line break, but it puts a space directly after the icon like I would hit the space bar one time. That is destroying my design because I´m aligning the text and icon in the center. Because of the space after the icon it is moving to the left and it´s not centered anymore. I tried with manual (br) and (p). Same result because TinyMCE deletes this code after taking it.

    Sorry, can´t give you an url because I work offline with XAMPP.

    Can somebody help?

    Thank you,

    Artan

    • This topic was modified 7 years, 4 months ago by Artan.
    • This topic was modified 7 years, 4 months ago by James Huff.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Artan

    (@artankrasniqi1988)

    7 years, 4 months ago

    Hi,

    I resolved the problem myself after hours of research.

    For some reason WordPress is deleting the “i tags” of Font Awesome when you switch in TinyMCE between “Visual” and “Text” mode. So when you just insert the Font Awesome i tag:

    <p><i class=”fas fa-tv fa-3x”></p>

    the i tag will be deleted when switching between the modes.

    —

    1. solution: Insert empty space (spacebar) between the i tag and </p> like this:

    <p><i class=”fas fa-tv fa-3x”> </p>

    But in this case by centering the Font Awesome icon, it will be moved a bit to the left because of the space on the right side.

    2. better Solution: Insert the i tag like this:

    <p><i class=”fas fa-tv fa-3x”><!– icon –></i></p>

    By inserting <!– icon –> in the i tag the icon won´t disappear after switching modes and you don´t have to add any extra space which could ruin your layout, for example when centering the icons.

    Hope this helps other people also! 🙂

    Regards,

    Artan

    Thread Starter Artan

    (@artankrasniqi1988)

    7 years, 4 months ago

    NOTE!

    This line “–” are two lines behind each other, like when you hit two times the minus button on the keyboard. This text editor is somehow changing it to one line when posting the comment. So replace just the lines before and after the word “icon” to two lines behind each other.

    Regards,

    Artan

    Plugin Author Andrew Ozz

    (@azaozz)

    7 years, 4 months ago

    Another option to try is adding some zero-width character there, perhaps &shy;.

    Edit: actually just re-tested this in latest trunk (the future WP 5.1) and it seems empty <i> elements are not stripped?

    • This reply was modified 7 years, 4 months ago by Andrew Ozz.
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Space after inserting a line-break’ is closed to new replies.