mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
3f80ada6a2
* revise icon documentation Screen readers would completley pass over the listing if icons as `<i class=“fa fa-*”></i>` largely means nothing to a screen reader. Updated the example icons to have a `role=“img”` and `aria-label` to announce what type of icon was being represented. In the `button` examples, added an `aria-hidden=“true”` attribute, so that the icons were not interpreted by screen readers. Revised the wording of some parts of the documentation to make wording more concise. * template accessibility updates * remove “logo” from alt value. While the image is of the shoelace logo, it also serves as the heading to the website. So hearing “Shoelace logo” as the `h1` of the document is very strange. * move the `main` element to a different location. Previously the `main` wrapped the navigation and the primary content of the document. This update moves the `main` to the primary content wrapper, to allow screen reader users a means to easily skip past the navigation. * template updates round 2 * update shoelace link in footer to say “shoelace - home” rather than “shoelace logo”. being that this is a link, this provides better context that the link will take a user to the home page, rather than to a “shoelace logo”. * add `aria-label` to twitter link to better align with github link announcements * add `aria-current=“page”` via jQuery script. Now the current navigation item will be announced as “current page” to those that can’t see the `current` css class styling.
2.2 KiB
2.2 KiB
layout, title, description, stylesheets
| layout | title | description | stylesheets | |
|---|---|---|---|---|
| default.html | Icons | Shoelace doesn’t ship with icons, but you can easily add your own! |
|
Icons
To stay light and customizable, Shoelace doesn’t bundle its own icons. However, you can easily include your favorite library such as Font Awesome. They work superbly together.
Font Awesome
Load Font Awesome icons locally or via CDN. To use the CDN version, add the following <link> to the <head> of your website or application:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
Then add icons as you normally would with <i class="fa fa-*" aria-hidden="true"></i>:
Star
Check
Edit
Comment
For your convenience, here’s a full list of Font Awesome icons.