Adding Custom icon to HTML Page

Yes, you can add the custom icon to span or i.

1. Give your span a class name.
2. Set your icon as a background-image. Set background-size.
3. If it doesn't work, add style to span and set width and height the same as you set to background-size.

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>