Skip to content

Commit

Permalink
Edit Readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Diemen Design committed Jan 12, 2019
1 parent aa5a68e commit ee76116
Showing 1 changed file with 8 additions and 4 deletions.
12 changes: 8 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,22 @@ Born out of frustration of other Icon Sets not containing Icons needed when deve

What sets LibreICONS apart from the rest, are the little things.
- The Icons are sized to 12px x 12px inside a 14px x 14px viewBox.
- Each Icon contains ARIA Markup to hide icons from Screen Readers to stop confusion between the Icons and any Presentational Elements that may contain them.
- Each Icon contains ARIA Markup to hide icons from Screen Readers to stop confusion between the Icons and any Presentational Elements that may contain them, and `role="image"` for presentational purposes.
- The source of the Icons are all minified.
- Being minified, also makes embedding cleaner, as we found including Icons using PHP or Javascript to embed icons can break the page layout.
- The standard and original icon set contains no colour or sizing so they can be controlled via CSS or manipulated easily.

Using the Icons:
After downloading the project, copy the libreicons-svg.css or libreicons-svg.min.css file from the project css/ folder, and the svg/ folder directory into your project.
In the <head> of your html, reference the location to your libreicons-svg.css.
<link rel="stylesheet" href="path/to/libreicons/css/libreicons-svg.css">

In the `<head>` of your html, reference the location to your libreicons-svg.css.
`<link rel="stylesheet" href="path/to/libreicons/css/libreicons-svg.css">`
To use the icons in your pages you use
<i class="libre">[svg file to include]</i>
`<i class="libre">[svg file to include]</i>`
You can alternatively use any inline element.

Or you could do like we do with LibreCMS and use a PHP Function to inject the SVG File directly into your generated pages. This also allows you to have more control over the size, colour, and animation of your icons.

TODO:
- Experiment with multi-coloured CSS controlled Icons.
- Continue adding Colour Icons and editing existing ones.

0 comments on commit ee76116

Please sign in to comment.