M_TAM M_TAM - 14 days ago 5
HTML Question

I want to add icons and words to side nav. But it is not working

Here I want to add icon and name in the side nav. But it's not work. I add one of the icons in my folder. But it's not display. I want to add 5 icons and logo to the red box and when I click on the icon it should load the relevant page. I am not expert in this field so please help me someone. I want something like this Any help will be appereciated. Thank you.



@font-face {
font-family: 'ecoico';
src:url('../fonts/ecoico.eot');
src:url('../fonts/ecoico.eot?#iefix') format('embedded-opentype'),
url('../fonts/ecoico.woff') format('woff'),
url('../fonts/ecoico.ttf') format('truetype'),
url('../fonts/ecoico.svg#ecoico') format('svg');
font-weight: normal;
font-style: normal;
}

.sidemenu {
position: fixed;
overflow: hidden;
top: 0;
left: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #000;
}

.sidemenu li a {
display: block;
text-indent: -500em;
height: 6.5em;
width: 6.5em;
line-height: 5em;
text-align: center;
color: #999;
position: relative;
border-bottom: 1px solid rgba(0,0,0,0.05);
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
}

.sidemenu li a:hover,
.sidemenu li:first-child a{
background: #B40404;
color: #fff;
}

/* class for current item */
.sidemenu li.cbp-vicurrent a {
background: #000;
color: #B40404;
}

.sidemenu li a:before {
font-family: 'ecoico';
speak: none;
font-style: normal;
font-weight: normal;
text-indent: 0em;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
-webkit-font-smoothing: antialiased;
}

.icon-logo{
color: white;
}

/* Example for media query (depends on total height of menu) */
@media screen and (max-height: 34.9375em) {

.sidemenu {
font-size: 10%;
}

}
.content{
margin-left: 10%;
}
span{
color: white;
}

<div class="side">
<ul class="sidemenu">
<li><a href="#" class="icon-logo"><img src="img/logo.png"><span>Dealer</span></a></li>
<li><a href="#" class="icon-archive"></a></li>
<li><a href="#" class="icon-search"></a></li>
<li><a href="#" class="icon-archive"></a></li>
<li><a href="#" class="icon-search"></a></li>
<li><a href="#" class="icon-archive"></a></li>
</ul>
</div>

<div class="content">

</div>




Answer

How about something like the following:

@font-face {
            font-family: 'ecoico';
            src:url('../fonts/ecoico.eot');
            src:url('../fonts/ecoico.eot?#iefix') format('embedded-opentype'),
            url('../fonts/ecoico.woff') format('woff'),
            url('../fonts/ecoico.ttf') format('truetype'),
            url('../fonts/ecoico.svg#ecoico') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        .sidemenu {
            position: fixed;
            overflow: hidden;
            top: 0;
            left: 0;
            height: 100%;
            list-style-type: none;
            margin: 0;
            padding: 0;
            background: #000;
        }

        .sidemenu li a {
            display: block;
            text-indent: -500em;
            height: 6.5em;
            width: 6.5em;
            line-height: 5em;
            text-align: center;
            color: #999;
            position: relative;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            -webkit-transition: background 0.1s ease-in-out;
            -moz-transition: background 0.1s ease-in-out;
            transition: background 0.1s ease-in-out;
        }

        .sidemenu li a:hover,
        .sidemenu li:first-child a{
            background: #B40404;
            color: #fff;
        }

        /* class for current item */
        .sidemenu li.cbp-vicurrent a {
            background: #000;
            color: #B40404;
        }

        .sidemenu li a:before {
            font-family: 'ecoico';
            speak: none;
            font-style: normal;
            font-weight: normal;
            text-indent: 0em;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 1.4em;
            -webkit-font-smoothing: antialiased;
        }

        .icon-logo{
            color: white;
        }

        /* Example for media query (depends on total height of menu) */
        @media screen and (max-height: 34.9375em) {

            .sidemenu {
                font-size: 10%;
            }

        }
        .content{
            margin-left: 10%;
        }
        span{
            color: white;
        }
<div class="side">
<ul class="sidemenu">
    <li><a href="#" class="icon-logo" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li>
    <li><a href="#" class="icon-archive" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li>
    <li><a href="#" class="icon-search" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li>
    <li><a href="#" class="icon-archive" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li>
    <li><a href="#" class="icon-search" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li>
    <li><a href="#" class="icon-archive" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li>
</ul>
</div>

<div class="content">
   <p>Argh! Here be some content, matey.</p>
</div>

It seems like the issue here is text-indent: -500em; in the .sidemenu li a class. Once that was removed, or rather overridden using text-indent: 0em !important;, the images seemed to start displaying properly. After that, I just added some in-line CSS styles to scale the images/icons to the parent container size.

Note: ignore the ghost icon. I just happened to have that saved in my imgur uploads for some code I was testing a couple months ago, so I figured I would use that as a placeholder in lieu of your icon images.


Edit: This all said, I think Pytheworld is correct. I believe that css was originally intended to be used with a custom font rather than an image file itself.

Comments