Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Icon Pack

Posted on 2013-11-18
8
Medium Priority
?
1,301 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
  • 3
5 Comments
 
LVL 22

Accepted Solution

by:
Sigurdur Armannsson earned 2000 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
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…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
Suggested Courses

824 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