如何离线托管材料图标？ [英] How to host material icons offline?

问题描述

我很抱歉，如果这是一个非常简单的问题，但是如何在没有

 < link的情况下使用Google材质图标href =https://fonts.googleapis.com/icon?family=Material+Icons =stylesheet> 
  

？

我想要我的应用即使用户没有互联网连接也能显示图标

解决方案

1

下载和将包含材质设计图标文件的iconfont文件夹复制到本地项目中 - https://github.com/google/material-design-icons/tree/master/iconfont

• 替换将@ font-face的url属性与本地项目文件夹路径（字体文件所在的位置）联系起来，例如。 url（iconfont / MaterialIcons-Regular.ttf）
  $ b

  
  

    @ font-face {
   font-family：'Material Icons'; 
   font-style：normal; 
   font-weight：400; 
   src：url（iconfont / MaterialIcons-Regular.eot）; / *对于IE6-8 * / 
   src：local（'Material Icons'），
   local（'MaterialIcons-Regular'），
   url（iconfont / MaterialIcons-Regular.woff2）格式（'woff2'），
   url（iconfont / MaterialIcons-Regular.woff）格式（'woff'），
   url（iconfont / MaterialIcons-Regular.ttf）格式（'truetype'）; 
  } 
   
   .material-icons {
   font-family：'Material Icons'; 
   font-weight：normal; 
   font-style：normal; 
   font-size：24px; / *首选图标大小* / 
   display：inline-block; 
   line-height：1; 
   text-transform：none; 
   letter-spacing：normal; 
   word-wrap：正常; 
   white-space：nowrap; 
  方向：ltr; 
   
   / *支持所有WebKit浏览器。 * / 
   -webkit-font-smoothing：antialiased; 
   / *支持Safari和Chrome。 * / 
   text-rendering：optimizeLegibility; 
   
   / *支持Firefox。 * / 
   -moz-osx-font-smoothing：灰度; 
   
   / *支持IE。 * / 
   font-feature-settings：'liga'; 
   
   $ / code> 

  


  



  ---

  
  
  

   < i class =material-icons> face< / i> 
    

  
  
  

  ---

  
  
  

  NPM / Bower软件包

  
  
  

  谷歌正式拥有Bower和NPM依赖项选项 - 遵循材料图标指南 1

  
  
  

  使用bower

  
  
  

  bower install material-design-icons --save
  
  

  使用NPM

  
  
  

  npm install material-design-icons --save

  
  
  

  ---

  
  
  

  1 http://google.github.io/material -design-icons /

  
  

  My apologies if this is a very simple question, but how do you use google material icons without a

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
  

  ?

  I would like my app to be able to display the icons even when the user does not have an internet connection

  解决方案

  Method 2. Self hosting 1

  Download and copy the iconfont folder, containing the material design icons files, into your local project -- https://github.com/google/material-design-icons/tree/master/iconfont

  • Replace the source in the url attribute of @font-face with your local project folder path (where the font files are located) eg. url( "iconfont/MaterialIcons-Regular.ttf")

  @font-face {
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
     src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
     src: local('Material Icons'),
          local('MaterialIcons-Regular'),
          url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
          url(iconfont/MaterialIcons-Regular.woff) format('woff'),
          url(iconfont/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';
  }
  

  ---

  <i class="material-icons">face</i>
  

  ---

  NPM / Bower Packages

  Google officially has a Bower and NPM dependency option -- follow Material Icons Guide 1

  Using bower

  bower install material-design-icons --save

  Using NPM

  npm install material-design-icons --save

  ---

  1 http://google.github.io/material-design-icons/

  这篇关于如何离线托管材料图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！