Using icon font with Icomoon

HTML code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Using Icomoon</title>
  <!-- importing css -->
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="container">

  </div>
</body>
</html>

CSS Code (main.css)
/* geneeral */
.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 15px;
}

Video Tutorial


UPDATE FINAL CODE
HTML Code (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Using Icomoon</title>
  <!-- importing css -->
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="container">
    <span class="icon icon-play"></span>
    <span class="icon icon-phone"></span>

    <span class="icon wifi"></span>
  </div>
</body>
</html>

CSS Code (main.css)
/* using icomoon */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?nzakmo');
  src:  url('../fonts/icomoon.eot?nzakmo#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?nzakmo') format('truetype'),
    url('../fonts/icomoon.woff?nzakmo') format('woff'),
    url('../fonts/icomoon.svg?nzakmo#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-play:before {
  content: "\e912";
}
.icon-phone:before {
  content: "\e942";
}
.icon-connection:before {
  content: "\e91b";
}

/* geneeral */
.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 15px;
}

/* custom style */
.icon {
  font-size: 40px;
  color: red;
}

.wifi:before {
  content: "\e91b";
  font-family: 'icomoon';
}

Share this

Related Posts