WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] Question about the use of the i element to display icons (7 posts)

  1. George Notaras
    Member
    Posted 7 months ago #

    Hello Anthony,

    I noticed that there is extensive use of the <i> element throughout the templates in order to display the icons. This results in having several <i class="..."></i> blocks without any text.

    Since the <i> element is supposed to be used with text, an author might have used it inside the post body in order to give emphasis to some words.

    In that case, I try to imagine how a search engine would value the existence of multiple <i> elements throughout the page, some of them enclosing text and some others not enclosing any text.

    My thought is that the search engine could be confused by this. The empty <i> tags could mean that the author is using the <i> element for something different than emphasizing text (which actually happens now) and thus automatically undervalue any text enclosed in <i> elements as well.

    I was wondering if it would be better to use another element for the icons, for instance <span>. I tested it and it seems to work well and validates without any issues.

    I'm not an expert in this field and I hope I am not exaggerating here. But I'd really like to hear your thoughts about this.

    Thanks in advance,
    George

  2. George Notaras
    Member
    Posted 7 months ago #

    Hi,

    I sent a pull request here, in case anyone would like to test using span instead of the i element.

    George

  3. ahortin
    Member
    Theme Author

    Posted 7 months ago #

    The <i> (and <b>) were html4 font style elements. Their style can now be changed via CSS, meaning they’re not only presentational — <b>, for example, doesn’t have to be bold. Because of this, it’s recommended to use classes to indicate meaning to make it easy to change the style later. It's now more appropropriate to use <em> for italics and <strong> for bold.

    The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.
    HTML — Living Standard

    Using the <i> element is also the recommended way of using the Font Awesome icons.

    You can read this article for more info on <i>, <b>, <em> and <strong> - http://html5doctor.com/i-b-em-strong-element/

    You can also find out more about Font Awesome here - http://fortawesome.github.io/Font-Awesome/

  4. George Notaras
    Member
    Posted 7 months ago #

    Hi Anthony.

    Thank you for your detailed reply. Seems like I'm still stuck with HTML 4 logic. I'll check these documents out.

    George

  5. George Notaras
    Member
    Posted 7 months ago #

    Hello Antony,

    I've done some research regarding the use of the <i> and <b> elements in HTML4 and HTML5 documents.

    In HTML5 their meaning is more semantic than presentational. Search engines should expect that these elements enclose text.

    Of course you did nothing wrong by following the examples provided by the Font-Awesome project.

    On the other hand, my research tells me that there is absolutely no reason valid enough to justify the use of those elements in order to display icons.

    My 2 cents,
    George

  6. George Notaras
    Member
    Posted 5 months ago #

    Hello Anthony,

    I had opened an issue on the Font-Awesome project about the use of the i element in the examples and they seem to be considering to switch to the more semantically correct span element. Perhaps you would be interested in following the discussion.

    FYI, I've used Quark with the patch I had sent you in the pull request and had no problems so far.

    Kind Regards,
    George Notaras

  7. ahortin
    Member
    Theme Author

    Posted 5 months ago #

    Thanks George, I'll check it out :-)

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.