• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1308
  • Last Modified:

Icon Pack

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
jnj_web_solutions
Asked:
jnj_web_solutions
  • 3
1 Solution
 
Sigurdur ArmannssonDesignerCommented:
Could you rephrase your question so we might try to understand the context between your current question and the code you posted?
Examples?
0
 
RobOwner (Aidellio)Commented:
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
 
jnj_web_solutionsAuthor Commented:
The code not working

 <li><a href="#" class="icon-mobile">Download</a></li>
    <li><a href="#" class="icon-globe">Download</a></li>
0
 
RobOwner (Aidellio)Commented:
What's not working? You also forgot to attach your font
0
 
RobOwner (Aidellio)Commented:
Still happy to look at the font if you're interested in getting this working.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now