how to use the icons of family = Material + Icons without having to use it from the web

Question

how to use the icons of family = Material + Icons without having to use it from the web

Navigation

#1 by (1 votes)

0

I have this simple problem, download the family = Material + Icons package for my AdminBSBMaterialDesign-master template and I need to include these icons in my base template to be able to use them:

Welcome To | Bootstrap Based Admin Template - Material Design

<!-- Google Fonts -->
<link href="{{ asset('plantilla/bootswatch/themes/cosmo/bootstrap.min.css') }}" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">

<!-- Bootstrap Core Css -->
<link href="{{ asset('plugins/bootstrap/css/bootstrap.css') }}" rel="stylesheet">

<!-- Waves Effect Css -->
<link href="plugins/node-waves/waves.css" rel="stylesheet" />

<!-- Animation Css -->
<link href="plugins/animate-css/animate.css" rel="stylesheet" />

<!-- Morris Chart Css-->
<link href="plugins/morrisjs/morris.css" rel="stylesheet" />

<!-- Custom Css -->
<link href="css/style.css" rel="stylesheet">

<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="css/themes/all-themes.css" rel="stylesheet" />

Something similar to the labels below that refer to a local directory. For example what I do in Bootstrap Core Css that works for me ok. Please, I need you to respond as soon as possible. Thanks !!!

link

asked by Barbara Ross Veitia 13.02.2018 в 16:12

source

1 answer

Error in foreach Invalid argument supplied for foreach () Fill a datagridview from an array

score 1 · Accepted Answer

To be able to use the resource locally in your project you must do the following:

1.- Access the repository hosted on GitHub Repository a> and download the file material-icons.css and save it in a folder.

2.- Then download these three files.

MaterialIcons-Regular.eot
MaterialIcons-Regular.ttf
MaterialIcons-Regular.woff
MaterialIcons-Regular.woff2

Your downloaded file material-icons.css must be in the form:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Note: The .css file and the 4 downloaded files must be in the same folder.

You can access the resource in this way ( example ):

<link href="{{ asset('plugins/Material Icons/material-icons.css') }}" rel="stylesheet">

I hope it's what you're looking for, regards.