Member Avatar for Elvi

Hello!
I want to add some icons on my .html work. i tried to do like this, for example: <span class="icon-home"></span> (but nothing show)
Anyone can help me please?
Thanks in advance!

  • 3 Contributors
  • 2 Replies
  • 173 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by mattster
Member Avatar for JorgeM

the html markup, <span class="icon-home">, doesnt nothing on its own to produce an icon (image). You would need to apply a style to the span.icon-home selector.

For example...here is one way to display an image for the span element with a class of "icon-home"

span.icon-home { 
  background: url(/images/home.png) no-repeat; 
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  display:block;
}
commented: thanks! +0
Member Avatar for mattster

Dont forget to take a look at the font awesome library!

To use it, shove this in your <head> section:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Then do this wherever you want to use an icon:

<!-- Instead of this -->
<span class="icon-home"></span>

<!-- Use this -->
<i class='fa fa-home'></i>

Then you can chage the colour of the icon so its the same as your text etc., loads of tutorials online and great to play around with. See here.

commented: THANK U SO MUCH! +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.