[javascript] 머티리얼 아이콘을 오프라인으로 호스팅하는 방법은 무엇입니까?

Program / 글쓴이

이것이 매우 간단한 질문이라면 사과드립니다. 그러나 Google 머티리얼 아이콘을 어떻게 사용합니까? 

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

?

사용자가 인터넷에 연결되어 있지 않아도 내 앱에서 아이콘을 표시 할 수 있기를 바랍니다.

답변

방법 2. 자체 호스팅 개발자 가이드

github (assets : zip 파일)에서 최신 릴리스를 다운로드 하고, 머티리얼 디자인 아이콘 파일이 포함 된 iconfont 폴더의 압축을 풀고 로컬 프로젝트 ( https://github.com/google/material-design-icons/)에 복사합니다. 릴리스

아카이브 의 iconfont 폴더 만 사용하면 됩니다 . 여기에는 여러 형식의 아이콘 글꼴 (다중 브라우저 지원용)과 상용구 CSS가 포함되어 있습니다.

  • @ font-face의 url 속성에있는 소스를 로컬 프로젝트 (글꼴 파일이있는 위치)의 iconfont 폴더에 대한 상대 경로로 대체하십시오. 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 패키지

Google에는 공식적으로 Bower 및 NPM 종속성 옵션이 있습니다-Material Icons Guide를 따르십시오 1

정자 사용 :bower install material-design-icons --save

NPM 사용 :npm install material-design-icons --save

재질 아이콘 : 또는 @marella의 https://marella.me/material-icons/ 에서 아이콘을 자체 호스팅하기위한 재질 디자인 아이콘 글꼴 및 CSS 프레임 워크를 살펴 봅니다.

노트

Google에 낮은 유지 관리 모드에 대한 프로젝트가있는 것 같습니다. 마지막 릴리스는 작성 시점에서 3 년 전이었습니다!

이와 관련하여 GitHub에 몇 가지 문제가 있지만 Is this project actively maintained? #951머티리얼 아이콘을 분기하고 계속 유지하는 여러 커뮤니티 프로젝트를 참조 하는 문제에 대한 @cyberalien 의견을 참조하고 싶습니다 .

답변

저는 Angular 4/5를 위해 구축하고 있으며 종종 오프라인으로 작업하므로 다음이 저에게 효과적이었습니다. 먼저 NPM을 설치합니다.

npm install material-design-icons --save

그런 다음 styles.css에 다음을 추가하십시오.

@import '~material-design-icons/iconfont/material-icons.css';

답변

위의 접근 방식은 저에게 효과가 없습니다. github에서 파일을 다운로드했지만 브라우저가 글꼴을로드하지 않았습니다.

내가 한 것은 머티리얼 아이콘 소스 링크를 여는 것입니다.

https://fonts.googleapis.com/icon?family=Material+Icons

이 마크 업을 보았습니다.

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

woff 글꼴 URL 링크 https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2를 엽니 다.

woff2 파일을 다운로드합니다.

그런 다음 woff2 파일 경로를 material-icons.css의 새 경로로 바꿉니다.

@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'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

그것은 나를 위해 일하게 만듭니다.

답변

웹팩 프로젝트를 사용하는 경우

npm install material-design-icons --save

당신은 단지 필요합니다

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

답변

이것은 쉬운 해결책이 될 수 있습니다

Google이 게시 한 원래 저장소 의 포크 인 이 저장소 를 가져옵니다 .

bower 또는 npm으로 설치

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

HTML 페이지에서 CSS 파일 가져 오기

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

또는

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

테스트 : HTML 파일의 body 태그 안에 아이콘 추가

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

얼굴 아이콘이 보이면 괜찮습니다.

작동하지 않으면 다음 ..을 node_modules경로에 접두사로 추가하십시오 .

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

답변

내 레시피에는 세 단계가 있습니다.

  1. material-design-icons 패키지를 설치하려면

    npm install material-design-icons

  2. material-icons.css 파일을 .less 또는 .scss 파일 / 프로젝트로 가져 오기

    @import "~/node_modules/material-design-icons/iconfont/material-icons.css";

  3. reactjs .js 파일 / 프로젝트에 권장 코드 포함

    <i className='material-icons' style={{fontSize: '36px'}}>close</i>

답변

사용 재료 디자인 아이콘 – iconfont을

전체 공개,이 패키지의 작성자입니다.

구글의 재료 디자인 아이콘 프로젝트는 낮은 유지 보수에
와 잠시 동안 구식 . https://material.io/icons/ 의 버전과
material-design-icons 의 버전 사이에 차이가 있습니다
.

다음과 같은 주요 문제를 해결하기 위해 material-design-icons-iconfont 를 만들었습니다 .

  • 재료 디자인 아이콘 잼 npm install– 모든 관련이없는 SVG / XML은 / … 파일이 제거 된
  • 글꼴 파일은 항상 Google FontsCDN 에서 바로 최신 상태입니다.
  • scss 지원

다음을 통해 설치 npm

npm install material-design-icons-iconfont --save

웹 응용 프로그램을 포장하는 방법 ( webpack/ gulp/ bower/ …) 에 따라 다르며 .css/ .scss파일 을 가져와야 합니다 (상대 글꼴 경로를 변경할 수 있음).

SCSS를 사용하여 가져 오기

sass 파일 중 하나에서 가져 오기

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

나중에 원하는 아이콘 <i class="material-icons">+ icon-id +</i> 

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

데모 페이지

글꼴 검색 및 복사 붙여 넣기를 지원 하는 간단한 데모 페이지 가 함께 제공됩니다.

영상