How to add font-awesome icons from sources with SASS?-CodePudding

I'm creating a React/Ionic project and using SASS for styling, but I had a hard time adding the stylings to the project.

I went to the

font-awesome.module.scss file:

  @font-face {
   font-family: 'cbm-icons';
   src        : url('./fonts/cbm-icons.eot?uwy7j0');
   src        : url('./fonts/cbm-icons.eot?uwy7j0#iefix') format('embedded-opentype'),
   url('./fonts/cbm-icons.ttf?uwy7j0') format('truetype'),
   url('./fonts/cbm-icons.woff?uwy7j0') format('woff'),
   url('./fonts/cbm-icons.svg?uwy7j0#cbm-icons') format('svg');
   font-weight : normal;
   font-style  : normal;
   font-display: block;
  }

  [class^="cb-"],
  [class*=" cb-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family   : 'cbm-icons' !important;
  speak         : never;
  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;
 }

 .cb-cross:before {
   content: "\ea0f";
 }

 .cb-checkmark:before {
   content: "\ea10";
 }

 .cb-warning:before {
  content: "\ea07";
 }

Here is the import in file in my routes file:

CodePudding user response：

The correct way of setting this up:

First, edit scss/variables.scss and edit the $fa-font-path variable to point to where your webfonts are. Then, just add to your main (in your case, global) scss file:

  @import "./fontawesome/scss/fontawesome.scss";

Then you can use the mixins as follows:

.twitter {
@extend