<div>
<blockquote>For example, &lt;i class=“fa fa-server”&gt;&lt;/i&gt; is not “visible” to screen readers</blockquote>Can i know which screen readers that are referring not "visible"? You may need to check your current font-awesome css library is supporting the mentioned icon? Here is the sample code <pre><code class="code-1 nolinks" id="code-20-43310120-1">&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;

&lt;i class="fa fa-server"&gt;&lt;/i&gt;
&lt;i class="fa fa-server" style="font-size:25px"&gt;&lt;/i&gt;
&lt;i class="fa fa-server" style="font-size:35px"&gt;&lt;/i&gt;
&lt;i class="fa fa-server" style="font-size:45px;color:orange"&gt;&lt;/i&gt;</code></pre>fa-server icons: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJMAAAA0CAYAAACO/ApDAAAFDElEQVR4Ae2bz2vTYBjH+2fkWthl4MHelqOFHhx4MOBF2KnHHYsHCV4keJAdiwcpOwgdk9EpSBDE7uCkHsTCEHoRK4gwQVjAHwxx8JWsCXn75s3avHmTvO2ewcuWsDdNv88n3/fJ8yQV0A8poEiBiqLj0GFIARBMBIEyBQgmZVLSgQgmYkCZAgSTMinpQARTIQx4wFF/wcYotTIEU2rJZCYMgG5lwYaT+osSTKklk5lAMMmoRnOECrAwGcDTOrCX9zDnc8IXPeA3gL+nwAebmUPOJAxl+TtZmCzguIgzYj8zYYnd3QLOuHN5XQuAIpg4ZXTZZAOrEUy9blygo9CdCKa4OFrs0RSmXQf4wwlEzsQJot0mC1PCklPW3d7zDvDdA06OgcEm5UwTdsZwH25hS4vhYjwFtMYwJUJ8qZe5AZxKBRUthoMBwTSlwIJtlAWTic1tF/2DHpwbRgAzDxOAE38pWaRxmjr+S1S0jGCydtTeex/vWImOt/6YWdB+9dEyfHcUwJQ6NIs3gWCaI2YXwdR6xV7BY3QaBNMckur+L5Ez1TZspYm4vVFLdCZjo4vxv4k23qED8zxn451pDLzeWrDhpg74UjpT8Ul4FatXwnxJ5Ex0N5eazHInRM5UPEz8XSTvTARTBjaKqPnwtZwMp5v7VBYmnRq9BtAfRv25Tx0di5Y5ucSKiXrDRFWYl+RORIYPYGHSqDe3145ACr/dm7pujd4AppsdjDwPXurhwo4VH5vo/Zh8Y2+/Kbj9LsIN562w866pKUyiRu+wpSlMt7qST1uInG0T7q+LYBLN4XOZorYvypk0cqZuC/gZWpL/+xRwDU1hirlLtmAa15qw7zVRFxYGy4Jpngo460yaNXr3WsBoDHwdAG64xPnnqE1vboh2o456rqONIXtRIYJJvwq4xjBRo3eKomCjHJjmq4BfKpiyJq98wpn1ePMkuvxnRjDpVwG/VI1ePxA13L47O4ib16O8p3anh+G7Dm4b8YQzn8dBqjDXqgmd+Qim4ouWsyrgIiddvn1BO8UPhIXOx9m38e7dCKb6oxHwbwjnagJMSksDFrpfJgEYP14XlAbKhCnSZAIyr8fygSP6RgFMWRPmhGRYaWmghX7QoD991RLAJPp6uuyjRm+GSOTjEtVbDjrbDqwV3wkW6eq/VAm4bPDDXIEPbFanm6eswLthEUn/7Jxy8gx6/OZA69fDz18K5V/alK4zyeVM1hP/KcMR2g0epgymJj1V9oLg8x0V27werDPVgJdFPNvEvmmSVCg1gLfMk6I/XGA3/N9MMBlYvTbbEczzJWYiuLHRhrvvYD225HgYHfTRz3WM4E2BVxZMaSvgGrVT9jpTCp5vvLWytlOyBr+MwMav/rAcoXcFXCOYRI3e96GjSTtTTjA1bPSk3KmNZqyvZ8I59L3Iw+C+KUjAI2cqEqb0FXAL+FzEWypu4DDhsiX6bQHfGHM6GwPPMjd6/UCoXOaCwCotDdjRu2iH9oUw6VcBZ3MmUVBL3LdjAQMX+NAFelUGQGln8oOfvmiZnIAHMBmrks3e8AE4Nhk2sP6gh/5BF/aavz95mdOvAq4xTOobvUHwY0sLG0zR30mlAdnjiT4jaZ9OMPHnGD83rUsDQqCknYlZN+lPUkBSgSV61UlSAZqmTAGCSZmUdCCCiRhQpgDBpExKOhDBRAwoU4BgUiYlHYhgIgaUKUAwKZOSDkQwEQPKFPgPmld/r3kH934AAAAASUVORK5CYII=" class="fr-fic fr-dii"> Common Troubleshooting on the Web (Font-Awesome) <a href="https://fontawesome.com/v5.15/how-to-use/on-the-web/other-topics/troubleshooting" rel="ugc">https://fontawesome.com/v5.15/how-to-use/on-the-web/other-topics/troubleshooting</a>
</div>

> For example, is not “visible” to screen readers

Can i know which screen readers that are referring not "visible"?
You may need to check your current font-awesome css library is supporting the mentioned icon?

Here is the sample code



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">






fa-server icons:

[data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJMAAAA0CAYAAACO/ApDAAAFDElEQVR4Ae2bz2vTYBjH+2fkWthl4MHelqOFHhx4MOBF2KnHHYsHCV4keJAdiwcpOwgdk9EpSBDE7uCkHsTCEHoRK4gwQVjAHwxx8JWsCXn75s3avHmTvO2ewcuWsDdNv88n3/fJ8yQV0A8poEiBiqLj0GFIARBMBIEyBQgmZVLSgQgmYkCZAgSTMinpQARTIQx4wFF/wcYotTIEU2rJZCYMgG5lwYaT+osSTKklk5lAMMmoRnOECrAwGcDTOrCX9zDnc8IXPeA3gL+nwAebmUPOJAxl+TtZmCzguIgzYj8zYYnd3QLOuHN5XQuAIpg4ZXTZZAOrEUy9blygo9CdCKa4OFrs0RSmXQf4wwlEzsQJot0mC1PCklPW3d7zDvDdA06OgcEm5UwTdsZwH25hS4vhYjwFtMYwJUJ8qZe5AZxKBRUthoMBwTSlwIJtlAWTic1tF/2DHpwbRgAzDxOAE38pWaRxmjr+S1S0jGCydtTeex/vWImOt/6YWdB+9dEyfHcUwJQ6NIs3gWCaI2YXwdR6xV7BY3QaBNMckur+L5Ez1TZspYm4vVFLdCZjo4vxv4k23qED8zxn451pDLzeWrDhpg74UjpT8Ul4FatXwnxJ5Ex0N5eazHInRM5UPEz8XSTvTARTBjaKqPnwtZwMp5v7VBYmnRq9BtAfRv25Tx0di5Y5ucSKiXrDRFWYl+RORIYPYGHSqDe3145ACr/dm7pujd4AppsdjDwPXurhwo4VH5vo/Zh8Y2+/Kbj9LsIN562w866pKUyiRu+wpSlMt7qST1uInG0T7q+LYBLN4XOZorYvypk0cqZuC/gZWpL/+xRwDU1hirlLtmAa15qw7zVRFxYGy4Jpngo460yaNXr3WsBoDHwdAG64xPnnqE1vboh2o456rqONIXtRIYJJvwq4xjBRo3eKomCjHJjmq4BfKpiyJq98wpn1ePMkuvxnRjDpVwG/VI1ePxA13L47O4ib16O8p3anh+G7Dm4b8YQzn8dBqjDXqgmd+Qim4ouWsyrgIiddvn1BO8UPhIXOx9m38e7dCKb6oxHwbwjnagJMSksDFrpfJgEYP14XlAbKhCnSZAIyr8fygSP6RgFMWRPmhGRYaWmghX7QoD991RLAJPp6uuyjRm+GSOTjEtVbDjrbDqwV3wkW6eq/VAm4bPDDXIEPbFanm6eswLthEUn/7Jxy8gx6/OZA69fDz18K5V/alK4zyeVM1hP/KcMR2g0epgymJj1V9oLg8x0V27werDPVgJdFPNvEvmmSVCg1gLfMk6I/XGA3/N9MMBlYvTbbEczzJWYiuLHRhrvvYD225HgYHfTRz3WM4E2BVxZMaSvgGrVT9jpTCp5vvLWytlOyBr+MwMav/rAcoXcFXCOYRI3e96GjSTtTTjA1bPSk3KmNZqyvZ8I59L3Iw+C+KUjAI2cqEqb0FXAL+FzEWypu4DDhsiX6bQHfGHM6GwPPMjd6/UCoXOaCwCotDdjRu2iH9oUw6VcBZ3MmUVBL3LdjAQMX+NAFelUGQGln8oOfvmiZnIAHMBmrks3e8AE4Nhk2sP6gh/5BF/aavz95mdOvAq4xTOobvUHwY0sLG0zR30mlAdnjiT4jaZ9OMPHnGD83rUsDQqCknYlZN+lPUkBSgSV61UlSAZqmTAGCSZmUdCCCiRhQpgDBpExKOhDBRAwoU4BgUiYlHYhgIgaUKUAwKZOSDkQwEQPKFPgPmld/r3kH934AAAAASUVORK5CYII=]

Common Troubleshooting on the Web (Font-Awesome)
https://fontawesome.com/v5.15/how-to-use/on-the-web/other-topics/troubleshooting [https://fontawesome.com/v5.15/how-to-use/on-the-web/other-topics/troubleshooting]

WordPress Dev & WordPress Coach

Alicia St Rose

Software Developer

APD Toronto

<div>
<div class="content wysiwyg-content fr-view">
Hi Experts, Is there any way I can make Font Awesome accessible to Screen Readers, and WCAG Compliant? For example, &lt;i class=“fa fa-server”&gt;&lt;/i&gt; is not “visible” to screen readers, as you cannot alt to an &lt;i&gt; tag. The only way I can think of is to make a screen shot of the icon, then use it as &lt;img&gt;, but is there a better way? Any help would be appreciated.
</div>
</div>

Hi Experts,
Is there any way I can make Font Awesome accessible to Screen Readers, and WCAG Compliant?
For example, is not “visible” to screen readers, as you cannot alt to an tag.
The only way I can think of is to make a screen shot of the icon, then use it as <img>, but is there a better way?
Any help would be appreciated.

Font Awesome and Screen Readers (WCAG)

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

font-awesome

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

HTML

A font is a particular size, weight and style of a typeface. Each font is a matched set of type, one piece (called a "sort") for each glyph, and a typeface consists of a range of fonts that share an overall design. With the advent of digital typography, font is frequently synonymous with typeface, although the two terms do not necessarily mean the same thing. In particular, the use of "vector" or "outline" fonts means that different sizes of a typeface can be dynamically generated from one design. Each style may still be in a separate "font file" -- for instance, the typeface "Futura" may include the fonts "Futura roman", "Futura italic", "Futura bold" and "Futura extended" —- but the term "font" might be applied either to one of these alone or to the whole typeface.