Skip to content

Using fonts as ions

jackdarker edited this page Jun 26, 2021 · 1 revision

toolbuttons with icons can be created by embedding images. But its more efficient to use a special font that has icons instead characters. f.e. font awesome.

  • Download package from fontawesome homepage
  • extract css & webfonts directory from zip into your ./dist
  • add stylesheet to head-content.html
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/regular.min.css">
    <link rel="stylesheet" href="./css/solid.min.css">
  • you can delete the other css and files from webfonts other then fa-regular... , fa-solid...
  • in your html you can then embedd symbols like so (notice the i-node will display home-symbol):
    <button class="btn"><i class="fa fa-home"></i></button>
  • for reference of the available symbols check the svgs directory in the zip. It contains svg with the proper name of all symbols.
    Or see here fontawesome gallery v5.15
Clone this wiki locally