HTML and CSS Reference
In-Depth Information
Yo u c a in fi in d a in e x a m p l e i m p l e m e in t a t i of in of f t h e s e i c of in s i in t h e fi l e p e c u l i a r - i c of in s .
html in the chapter6 folder. To implement the icons here, you need to download
the Peculiar icon CSS and HTML from the URL provided earlier, and then copy all
the HTML and CSS to your own files. For example, this where I put the Home icon:
<li>
<a href=”#”>Home
<div class=”icon icon-home”>
<div class=”icon-home-triangle”></div>
<div class=”icon-home-rectangle”></div>
<div class=”icon-home-line”></div>
>
</a>
</li>
Yo u n e e d t o m a k e is u r e t h e i c o n H T M L i is p l a c e d i n is i d e t h e c o n t a i n e r y o u w a n t
it to appear in (in this case the anchor) and that the container will display as a
block-level element. In the case of your menu this works fine, because the anchors
are already set to
display: inline-block;
to make the sizing work. Once all the
Peculiar CSS is in place, you need to modify it a bit. For starters, the general icon
class needs some work:
.icon {
position: absolute;
top: 16px;
left: 48px;
width:16px;
height:16px;
transform: scale(1.5);
}
