Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The first thing you will need to do is import the font using @font-face in the CSS.</p> <p>You will need the four major filetypes for the icons to have cross-browser functionality. These are <code>eot</code> <code>ttf</code> <code>svg</code> and <code>woff</code>. A good free resource for icon font sets is <a href="http://fontello.com/" rel="nofollow">fontello.com</a>:</p> <pre><code>@font-face { font-family: 'spokeo'; src: url('path/to/spokeo.eot'); src: url('path/to/spokeo.eot?#iefix') format('embedded-opentype'), url('path/to/spokeo.woff') format('woff'), url('path/to/spokeo.ttf') format('truetype'), url('path/to/spokeo.svg#spokeo') format('svg'); font-weight: normal; font-style: normal; } </code></pre> <p>The above imports the font to the browser for use later when you call the icons in your page.</p> <p>You will now define the .icon class in the stylesheet like you did in your example:</p> <pre><code>.icon { font-family: 'spokeo'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; position: relative; } .search_icon:before { content:'\e001'; } .down_arrow_icon:before { content:'\e002'; } .up_arrow_icon:before { content:'\e003'; } </code></pre> <p>And then in your HTML you would write in the <code>icon</code> class as well as the specific class in your icon so that it includes all of the styles associated with all icons and then the specific icon contents, like this:</p> <pre><code>&lt;div&gt; &lt;i class="icon search_icon"&gt;&lt;/i&gt;Search &lt;i class="icon down_arrow_icon"&gt;&lt;/i&gt;Down etc... &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload