Solved

Icon Pack

Posted on 2013-11-18
8
1,288 Views
Last Modified: 2013-12-06
i need information on how add new icon on existing  font. i  need icons like [ icon-mobile,globe,..]

  icon code:

<ul class="cbp-vimenu">
    <li><a href="#" class="icon-logo">Logo</a></li>
    <li><a href="#" class="icon-archive">Archive</a></li>
    <li><a href="#" class="icon-search">Search</a></li>
    <li class="cbp-vicurrent"><a href="#" class="icon-pencil">Pencil</a></li>
    <li><a href="#" class="icon-location">Location</a></li>
    <li><a href="#" class="icon-images">Images</a></li>
    <li><a href="#" class="icon-download">Download</a></li>
</ul>

Open in new window


THE CSS:

@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;
}
 
.cbp-vimenu {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #f7f7f7;
}
 
.cbp-vimenu li a {
    display: block;
    text-indent: -500em;
    height: 5em;
    width: 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;
}
 
.cbp-vimenu li a:hover,
.cbp-vimenu li:first-child a{
    background: #47a3da;
    color: #fff;
}
 
/* class for current item */
.cbp-vimenu li.cbp-vicurrent a {
    background: #fff;
    color: #47a3da;
}
 
.cbp-vimenu 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;
}
 
.cbp-vimenu li a.icon-logo:before {
    content: "C";
    font-weight: 700;
    font-size: 300%;
    font-family: 'Lato', Calibri, Arial, sans-serif;
}
 
.icon-search:before {
    content: "\e004";
}
 
.icon-archive:before {
    content: "\e005";
}
 
.icon-download:before {
    content: "\e006";
}
 
.icon-location:before {
    content: "\e007";
}
 
.icon-images:before {
    content: "\e009";
}
 
.icon-pencil:before {
    content: "\e008";
}
 
/* Example for media query (depends on total height of menu) */
@media screen and (max-height: 34.9375em) { 
 
    .cbp-vimenu {
        font-size: 70%;
    }
 
}

Open in new window

0
Comment
Question by:jnj_web_solutions
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
8 Comments
 
LVL 22

Accepted Solution

by:
Sigurdur Armannsson earned 500 total points
ID: 39660508
Could you rephrase your question so we might try to understand the context between your current question and the code you posted?
Examples?
0
 
LVL 43

Expert Comment

by:Rob
ID: 39660665
Add the ones you want to the bottom:

<ul class="cbp-vimenu">
    <li><a href="#" class="icon-logo">Logo</a></li>
    <li><a href="#" class="icon-archive">Archive</a></li>
    <li><a href="#" class="icon-search">Search</a></li>
    <li class="cbp-vicurrent"><a href="#" class="icon-pencil">Pencil</a></li>
    <li><a href="#" class="icon-location">Location</a></li>
    <li><a href="#" class="icon-images">Images</a></li>
    <li><a href="#" class="icon-download">Download</a></li>
   <li><a href="#" class="icon-mobile">Download</a></li>
    <li><a href="#" class="icon-globe">Download</a></li>
</ul>

In the CSS, add the class after the others:

...
.icon-pencil:before {
    content: "\e008";
}
.icon-mobile:before {
    content: "\e00x";
}
.icon-globe:before {
    content: "\e00x";
}

WHERE x IS THE INDEX IN THE FONT.  Are you sure these icons are present in the font?  They need to be to have this work.

Please post the font ecoico with all the different versions eg eot, ttf, woff, svg and I can update this example for you here:  http://jsbin.com/iPuJEQUR/1/edit
0
 

Author Comment

by:jnj_web_solutions
ID: 39661653
The code not working

 <li><a href="#" class="icon-mobile">Download</a></li>
    <li><a href="#" class="icon-globe">Download</a></li>
0
 
LVL 43

Expert Comment

by:Rob
ID: 39661714
What's not working? You also forgot to attach your font
0
 
LVL 43

Expert Comment

by:Rob
ID: 39672516
Still happy to look at the font if you're interested in getting this working.
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will show, step by step, how to integrate R code into a R Sweave document
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question