Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Icon Pack

Posted on 2013-11-18
8
Medium Priority
?
1,295 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 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

How To Reduce Deployment Times With Pre-Baked AMIs

Even if we can't include all the files in the base image, we can sometimes include some of the larger files that we would otherwise have to download, and we can also sometimes remove the most time-consuming steps. This can help a lot with reducing deployment times.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

715 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