Adding Custom icon to HTML Page

Question

I found this way to add default icons to any HTML page using i element : W3.CSS Icons

Can I use the same way to have custom icon with the same way by adding my 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>

Answer 1

Sure, although it depends on how you want to handle it.

Regarding Icon Fonts

Most of the images used in your examples are actually based on fonts that was create map each glyph to a specific Unicode value and then use CSS classes to set the content property to that specific value, thus displaying the icon. It's unlikely that you would want to make a font to do just that, but there are quite a few out there that you might want to explore if you want to use a uniform set of icons for your site or application.

Using CSS Classes

A simpler approach would be to create a CSS class that points to your specific image as a background and sets the amount of space necessary to accommodate it :

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

You would then need to just create an element that has that CSS class to display your 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>