Glyphicons
- Provided by Glyphicons
- In Bootstrap 3 they are in the fonts/ director
- Embedded OpenType (EOT)
- Scalable Vector Graphics (SVG)
- Web Open Font Format (WOFF and WOFF2)
- TrueType Font (TTF)
- We need eot
- Available Glyphicons
- glyphicon
- glyphicon-search ...
- aria-label and aria-hidden are important for screen-readers.
- (The first is read out, the second can hide elements useless to screen-readers.)
examples/bootstrap/glyphicons.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> glyphicon-search: <span class="glyphicon glyphicon-search" aria-hidden="true"></span><br> <div> btn-default btn-lg: <button type="button" class="btn btn-default btn-lg" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> </div> <div> btn-default: <button type="button" class="btn btn-default" aria-label="Right Align"> <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default" aria-label="Center Align"> <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span> </button> </div> <div> btn-default btn-xs: <button type="button" class="btn btn-default btn-xs" aria-label="Justify Align"> <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span> </button> </div> <p> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button> </div> </div> </div> </body> </html>