13

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>
Ahmed Emad
  • 550
  • 2
  • 7
  • 25

3 Answers3

31

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>
Rion Williams
  • 74,820
  • 37
  • 200
  • 327
  • So I shoul use span instead of I element ? – Ahmed Emad Jul 11 '16 at 13:05
  • It's a matter of preference, some people prefer `` tags but it's up to you, for this purpose there won't be much of a difference between the two (`
    `, ``, and others will work just as expected as well).
     – Rion Williams Jul 11 '16 at 13:12
  • You need to make sure that your path is correct. Sometimes it's safer to use an absolute path of possible as any relative paths will be relative to where the CSS declaration is at. – Rion Williams Jul 11 '16 at 13:27
  • I tried different URLs and online URLs but still the same. These URL appears regularly with tag – Ahmed Emad Jul 11 '16 at 13:32
  • Could you post what your current markup and CSS looks like? – Rion Williams Jul 11 '16 at 13:32
  • As I mentioned earlier, this is likely an issue of your URL being relative. Since you are declaring it inline within a ` – Rion Williams Jul 11 '16 at 13:44
  • I tried this waybut the same result. Icon doesn't appear – Ahmed Emad Jul 11 '16 at 13:51
  • I'm not sure exactly what could be going wrong. What does your rendered markup look like (i.e. after the page is rendered, what does the ` – Rion Williams Jul 11 '16 at 13:53
  • No errors. style after rendering : .icon { background: url('/Images/logo.png'); height: 20px; width: 20px; display: block; /* Other styles here */ } – Ahmed Emad Jul 11 '16 at 14:07
  • I'm not sure what is going wrong. The code should be resolving the proper location for your image and serving it as expected. I added a demo that targeted an external URL and it is working just fine. – Rion Williams Jul 11 '16 at 14:16
  • I tried your external image and still the same result – Ahmed Emad Jul 11 '16 at 14:20
  • 2
    thanks Rion for your effort and interest , the problem was that image is Png when i use nay other JPG it works properly. only I had problem that this item is in new line :Main Itmes – Ahmed Emad Jul 11 '16 at 15:07
2

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.
Ulvi
  • 965
  • 12
  • 31
0

.container{
 width:700px;
 height:700px;
 margin-top:50px;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  float:left;
}

.title {
  color: grey;
  font-size: 18px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover, a:hover {
  opacity: 0.7;
}
.card1{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin-left:6px;
  
  text-align: center;
  float:left;
}
<html>
<head>
<!-- Add icon library -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">

</head>
<body>
<div class="container">
<div class="card">
  <img src="g.jpg" alt="John" style="width:50%">
  <h1>Bilal</h1>
  <p class="title">CEO & Founder, Example</p>
  <p>Stacker </p>
  <p>
  <a href="#"><img title="facebook" alt="facebook" src="fb.png" width="30px"></a> 
  <a href="#"><img title="facebook" alt="facebook" src="t.png " width="30px></a> 
  <a href="#"><img title="facebook" alt="facebook" src="i.png " width="30px ></a> 
  <a href="#"><i class="fa fa-facebook"></i></a> 
  </p>
  <p><button>Contact</button></p>
</div>
<div class="card1">
  <img src="g.jpg" alt="John" style="width:50%">
  <h1>Bilal</h1>
  <p class="title">CEO & Founder, Example</p>
  <p>Stacker </p>
  <p>
  <a href="#"><img title="facebook" alt="facebook" src="fb.png" width="30px"></a> 
  <a href="#"><img title="facebook" alt="facebook" src="t.png " width="30px></a> 
  <a href="#"><img title="facebook" alt="facebook" src="i.png " width="30px ></a> 
  <a href="#"><i class="fa fa-facebook"></i></a> 
  </p>
  <p><button>Contact</button></p>
</div>
</div>
</body>
Bilal aftab
  • 11
  • 2