Exchanging icons on menu button does not show

Question

Exchanging icons on menu button does not show

Navigation

#1 by (1 votes)

1

I'm trying to change the icons, but it does not show

Menu Source link

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

asked by anonymous 09.07.2018 / 19:52

1 answer

Image does not float with bootstrap 4 Javascript - how to perform a search for a property on an array object?

score 1 · Accepted Answer

Angelino in the documentation of the link that you mentioned speaks that the first thing to do is to prepare the font of icons ...

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

In case he used icomoon.io you have to go there, select the items you need and generate the fonts according to the image link

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

SeebelowthefonticonIcreated!

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 it generated for icons in 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";
}