Unlock the power of Font Awesome with the <i> </i> tag - Nibbler

I could use some assistance with a concept that I'm finding particularly challenging.

After running my website through Nibbler, my goal is to achieve a perfect 10/10 score in all (or most) categories.

However, I am facing difficulty due to the 17 instances of the Font Awesome <i> tag that Nibbler suggests should not be used.

According to FA's documentation, the correct syntax should be:

<i class="fa fa-check"></i>

Nibbler guidance indicates:

2 pages of this website were found to include the tag <i>. It is generally advised to avoid using presentational elements like <i>.

The recommendation is to replace all presentational tags with semantic alternatives whenever possible. This involves using semantically correct HTML and then styling it with CSS.

Currently, my website consists of only 2 pages, but if I persist with this practice, more occurrences may arise. Therefore, I would appreciate any suggestions for resolving this issue before proceeding further.

Any ideas or recommendations on alternative approaches? Thank you in advance.

htmlcssfont-awesome

Answer №1

Consider using

<span class="fa fa-check"></span>

instead of

<i class="fa fa-check"></i>

Answer №2

It seems like it should work if you follow this approach. Give it a try by using the link font-awesome online.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>fa</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">



</head>

<body>
<i class="fa fa-check"></i><input type="text"/>

</body>
</html>

You can access the font-awesome style sheet online by including this line of code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Place this line between the closing <title> and opening <head> tags in your HTML file.

Answer №3

Make sure to include the aria-hidden="true" attribute in either your <i> or <span> tag

<i class="fa fa-check" aria-hidden="true"></i>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a grid layout with Angular Material by utilizing the *ngFor directive

I've encountered a situation where I need to manually insert each column in my component data. However, I would prefer to dynamically generate them similar to the example provided at the bottom of the page. <div> <table mat-table [dataSour ...

htmlangularfrontendngfor

Reorganizing DIV elements on-the-fly

I've recently delved into the world of html, css, and javascript with the hopes of creating my very own news website. However, I've come across a puzzling problem: My vision is to have 10 div blocks on the homepage, each containing a headline wi ...

javascriptphphtmlcss

Issues with Google fonts not displaying properly on WordPress site

I'm just starting out with Wordpress and I'm using the html5blank theme to bring in my stylesheets. However, I've run into an issue where the google fonts are not being applied on my wordpress site. In my header.php file, I have included th ...

phpcsswordpresshtml

Can a Div Maintain White Space No Wrap and Stretch to the Full Width of its Parent Element?

Within a parent element, I have a div that allows for horizontal scrolling. Using CSS and jQuery, the content can overflow horizontally with white space no wrap. Setting a fixed width for the div works well, but my responsive website requires a dynamic wid ...

jqueryhtmlcss

Renew the Look of Dynamic HTML with Updated Styles

In the middle of my website, there is a console that contains links to dynamically update its content using javascript. Everything works smoothly, but the new HTML added dynamically does not have any styling applied to it. Is there a way to refresh the CS ...

javascripthtmlcssajax

Increased space between the sidebar and the top bar

Currently, my code is a bit messy as I am still in the learning stages of bootstrap. I need some assistance on how to resolve the empty space that exists between the top and side bar elements. <!DOCTYPE html> <html lang="en"> <sty ...

htmlcsstwitter-bootstrap

Positioning a button on the side of the screen while a hidden side panel is open

I am attempting to create an animation using a side panel that will slide into view when a button is clicked. Here is how it appears when the page loads: https://i.sstatic.net/JPQ2W.jpg When the user clicks on one of the buttons, the notes panel will be ...

jqueryhtmlcssjquery-uisass

Struggling to retrieve Codemirror textarea values across multiple elements with JavaScript/jQuery

I've been struggling to retrieve the values from my textarea codemirror in order to send them as JSON to the server for saving after editing. Unfortunately, I am unable to select the ELEMENT...I even attempted to grab the element by its id...with no s ...

javascriptjqueryhtmlcodemirror

Creating a dynamic slideshow with automated arrow navigation is simpler than you may think

I have successfully tested the slideshow and it is functioning perfectly without any issues. I would like to have a dual slideshow setup (slideshow 1 and slideshow 2) with next and previous buttons, but I am interested in adding an automatic sliding featur ...

javascripthtmlcss

Eliminate spaces between divs without any margins or padding

In my HTML code, I have two divs with different classes - mini-date-holder and mini-event-holder. Even though both of these divs are set to have no margin or padding, they are still displaying with a gap between them. I'm struggling to understand why ...

htmlcss

Can Socket.IO link to a source tag that doesn't actually exist?

As I was following the 'Get started thing' tutorial on Socket.IO, I encountered a step that required me to add the socket.io.js script to my HTML page. The instruction provided was: /socket.io/socket.io.js However, when I checked my folders, I ...

javascripthtmlnode.jsexpresssocket.io

Icons on the top banner that adjust to different screen sizes

I am still getting acquainted with Wordpress, so please bear with me if I use incorrect terminology or ask silly questions. I am eager to learn and improve. My website is focused on jewelry (using Kallyas premium), and I have a row of banner icons between ...

phphtmlcsswordpressresponsive

Display a picture retrieved from a POST request using Angular and a Spring Boot backend

Recently, I've been delving into the world of HTTP requests. My latest task involves uploading an image from the client and sending it to the server using a POST request. When testing this process in Postman, everything works smoothly as I receive th ...

htmlangulartypescripthttprequest

The data type 'string' cannot be assigned to the data type 'Position'

Currently, I am in the process of converting React js to typescript. The component being used is a Class Component. I would like to obtain CSS settings through props and apply them to an element. How can I resolve this issue? render(){return( <span st ...

cssreactjstypescript

What is the proper way to utilize the "active" class in conjunction with PHP?

I'm currently facing an issue in my PHP code where I am trying to dynamically assign the "active" class to a navigation link based on the value of the $CURRENT_PAGE variable. Below is the snippet from my navigation.php file, which is included across ...

phphtmlbootstrap-4

Setting a customized background color for a designated section of a component

I am trying to create a hover effect at the position of a cursor, similar to what is shown in this example: For reference, I have also created a code snippet: https://jsfiddle.net/onnmwyhd/ Below is the code I am using: HTML <div id="container&q ...

javascriptjqueryhtmlcss

What is the most effective method for triggering individual sounds when hovering and clicking?

Hello everyone! I must admit, I am quite new to JavaScript and don't have much knowledge about it. I've shared my question on Reddit as well, so I'm hoping to get some guidance there too. Currently, I am working on editing a website and I w ...

javascriptjqueryhtmlaudio

Different syntax issues in Firefox and Internet Explorer are causing errors

While this code successfully runs on Firefox, it encounters errors when used on IE. document.getElementById('zip_container').style.borderLeft = '1px solid #D9D9D9;'; In this code snippet, zip_container refers to a div element. If any ...

javascriptcss

Ways to optimize the spacing between the menu bar and widgets

I have successfully incorporated multiple images side by side on my blog Following is the code used for this layout: <div class="images"> <figure> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsT ...

htmlcsscss-floatblogger

Trouble accessing HTML file in web browser

I just finished creating a basic webpage called HelloWorld.html using HTML, JavaScript, and CSS. It runs smoothly when I open it from Eclipse IDE and view it through a browser. The functionality of the page is that it contains 5 buttons, each revealing th ...

javascriptcsshtml