Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Adding web icon fonts to TopMenu

‎05-25-2016 09:39 AM
‎05-25-2016 09:39 AM

Adding web icon fonts to TopMenu

I've looked all around for this but cannot find the answer. I am using .svg fonts that have a stylesheet and the font files in a directory. I added the CSS to my stylesheet, and have everything in place.

 

Since the category links are dynamically generated, I cannot get the SVG fonts to show. 

 

Sure, I can add them in as a "background-image" in CSS, but that does not give me control of my icon as a font. I want to be able to control the size and color as intended.

 

I tried this:

<?php
/**
 * Top menu for store
 *
 * @see Mage_Page_Block_Html_Topmenu
 */
?>
<?php $_menu = $this->getHtml('level-top') ?>

<?php if($_menu): ?>
 <nav id="nav">
 <ol class="nav-primary">
 <li class="level0 nav-1 first level-top"><div class="icon icon-myicon"></div></li>
 <?php echo $_menu ?>
 </ol>
 </nav>
<?php endif ?>and it does not work. It shows the letter "a" which is the character mapping. It works fine in standard HTML pages, but trying to dynamically add it to Magento's TopMenu is a pain.

 

Here is how my CSS looks:

 

@charset "UTF-8";

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

}

[data-icon]:before {
  font-family: "jme-font-5" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "jme-font-5" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-myicon:before {
  content: "\61";
  font-size: 32px;
}

and example HTML that works:

 

<ul class="glyphs css-mapping">
        <li>
          <div class="icon icon-myicon"></div>
        </li>
</ul>

 

0 Kudos