Adding Custom icon to HTML Page -

i found way add default icons html page using element : w3.css icons

can use same way have custom icon same way adding image?

adding markup after changes :

                      <li class="treeview">                     <a href="#"><span class="icon"></span><span>main itmes</span> <i class="fa fa-angle-left pull-right"></i></a>                     <ul class="treeview-menu">                         <li>                             <a href="/page1.aspx">item1</a>                         </li>                         <li>                             <a href="/page2.aspx">item2</a>                         </li>                                                     <li>                             <a href="/pagee3.aspx">item3</a>                         </li>                     </ul>                 </li>  

css :

        <style>             .icon {         background: url("images/logo.png");         height: 20px;         width: 20px;         display: block;         /* other styles here */     }   </style> 

sure, although depends on how want handle it.

regarding icon fonts

most of images used in examples based on fonts create map each glyph specific unicode value , use css classes set content property specific value, displaying icon. it's unlikely want make font that, there quite few out there might want explore if want use uniform set of icons site or application.

using css classes

a simpler approach create css class points specific image background , sets amount of space necessary accommodate :

.icon {     background: url('your-image-url.jpg');     height: 20px;     width: 20px;     display: block;     /* other styles here */ } 

you need create element has css class display icon :

<span class='icon'></span> 

example

.icon {    background: url('http://s.mobileread.com/i/icons/icon7.gif');    height: 16px;    width: 16px;    display: block;    /* other styles here */  }

<i class='icon'></i>