Changing icons on menu button does not show

Asked

Viewed 54 times

1

I’m trying to change the icons, but it doesn’t show

Menu font https://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/

Original CSS Code

.icon-team, .icon-blog, .icon-home, .icon-portfolio, .icon-services, .icon-contact, .icon-menu {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.icon-team:before {
    content: "\e000";
}

HTML code with modified CSS

.icon-barcode,
.icon-blog,
.icon-home,
.icon-portfolio,
.icon-services,
.icon-contact,
.icon-menu {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.icon-barcode:before {
  content: "\e937";
}
<a href="#">
  <span class="icon">
<i aria-hidden="true" class="icon-barcode"></i>
</span>
  <span>Home</span>
</a>

html css menu

  • What should be \e937?

  • This number is the barcode icon that would be the icon-Barcode @Andersoncarloswoss

  • @Angelino guy I edited the answer and I tried to put all the details, but if you have any questions just give the touch I give you a strength

  • Thanks Solved @Andersoncarloswoss

1 answer

1


Angelino in the documentation of the link you quoted says that the first thing to do is to prepare the icon font...

The first Thing we need to do is to create the icons for the menu.

In case he used the icomoon.io you have to go in there, select the items you need and generate the fonts as per the image https://icomoon.io/app/#/select

First you choose the icons and then download. So logically the font only has the characters you selected before generating the files .ttf .otf etc.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

See below the font icon I generated!

body {
    font-size: 2rem;
}
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/c4dd1abf17/UntitledProject/style.css">

<i class="icon-office"></i>
<i class="icon-pacman"></i>
<i class="icon-file-play"></i>
<i class="icon-file-video"></i>
<i class="icon-coin-euro"></i>

Full CSS generated by Icomoon itself Notice the code he generated for the icons on content: "\e93c" etc..

@font-face {
  font-family: 'icomoon';
  src:  url('https://i.icomoon.io/public/temp/c4dd1abf17/UntitledProject/icomoon.eot?9rw8st');
  src:  url('https://i.icomoon.io/public/temp/c4dd1abf17/UntitledProject/icomoon.eot?9rw8st#iefix') format('embedded-opentype'),
    url('https://i.icomoon.io/public/temp/c4dd1abf17/UntitledProject/icomoon.ttf?9rw8st') format('truetype'),
    url('https://i.icomoon.io/public/temp/c4dd1abf17/UntitledProject/icomoon.woff?9rw8st') format('woff'),
    url('https://i.icomoon.io/public/temp/c4dd1abf17/UntitledProject/icomoon.svg?9rw8st#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-office:before {
  content: "\e903";
}
.icon-pacman:before {
  content: "\e916";
}
.icon-file-play:before {
  content: "\e929";
}
.icon-file-video:before {
  content: "\e92a";
}
.icon-coin-euro:before {
  content: "\e93c";
}

Browser other questions tagged html css menu

You are not signed in. Login or sign up in order to post.