program story

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

inputbox 2020. 9. 21. 07:40
반응형

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

이것이 매우 간단한 질문이라면 사과드립니다. 그러나 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

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

npm install material-design-icons --save

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

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

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

npm install material-design-icons --save

당신은 단지 필요합니다

import materialIcons from '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');
}

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

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

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>

내 대답에 셀프 호스팅 아이콘에 필요한 모든 것을 컴파일하려고했습니다. 이 4 가지 간단한 단계를 따라야합니다.

  1. materialize 저장소의 iconfont 폴더를 엽니 다.

    링크-[ https://github.com/google/material-design-icons/tree/master/iconfont]

  2. 이 세 아이콘 파일 다운로드->

    MaterialIcons-Regular.woff2- 형식 ( 'woff2')

    MaterialIcons-Regular.woff- 형식 ( 'woff')

    MaterialIcons-Regular.ttf -format ( 'truetype');

    참고-다운로드 후 원하는 이름으로 이름을 바꿀 수 있습니다.

  3. 이제 CSS 로 이동 하여이 코드를 추가합니다.

@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';
}

참고 : src : url (...)에 제공된 주소는 index.html 파일이 아닌 'CSS 파일'에 대한 것이어야합니다. 예를 들어 src 일 수 있습니다. url (../ myicons / MaterialIcons-Regular.woff2)

  1. 이제 사용할 준비가되었으며 HTML로 수행 할 수있는 방법은 다음과 같습니다.

<i class="material-icons">face</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>

데모 페이지

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

영상

질문 제목은 머티리얼 아이콘을 오프라인 으로 호스팅 하는 방법을 묻지 만 본문 은 머티리얼 아이콘을 오프라인 으로 사용 하는 것이 목표임을 명확히합니다 (강조 표시) .

재료 아이콘 파일의 고유 한 사본을 사용하는 것은 유효한 접근 / 구현입니다. 다른 하나는 서비스 워커를 사용할 수있는 사람들을 위해 서비스 워커 가 처리하도록하는 것입니다. 이렇게하면 사본을 구하고 최신 상태로 유지해야하는 번거 로움이 없습니다.

예를 들어 Workbox 를 사용하여 가장 간단한 방법으로 workbox -cli를 실행하고 기본값을 수락하여 서비스 워커를 생성 한 후 생성 된 서비스 워커에 다음 텍스트를 추가합니다.

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

그런 다음 F12> Application> Storage> IndexedDB를 사용하여 Chrome에서 캐시되었는지 확인하고 이름에 googleapis가있는 항목을 찾을 수 있습니다.

완료 한 후 npm install material-design-icons기본 CSS 파일에 다음을 추가하십시오.

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

각도 CLI

npm install angular-material-icons --save

또는 

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

material-design-icons-iconfont는 아이콘의 최신 업데이트 버전입니다. angular-material-icons가 오랫동안 업데이트되지 않았습니다.

설치가 완료 될 때까지 기다린 다음 angular.json-> 프로젝트-> 아키텍트-> 스타일에 추가하십시오.

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

또는 material-desing-icons-iconfont를 설치했다면

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

에 http://materialize.com/icons.html 당신이 페이지에 포함 스타일 헤더 정보, 당신은 실제 하이퍼 링크로 이동 할 수 있으며 오프라인 아이콘에 국한 복사합니다.

방법은 다음과 같습니다 .NB : 모든 icon.css 및 somefile.woff 에서 두 개의 파일을 다운로드 합니다.

  1. 헤더에서 필요에 따라 다음 URL로 이동하십시오.

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

페이지를 whatever_filename.css로 저장합니다. 기본값은 icon.css입니다.

  1. 이와 같은 줄을 찾으십시오.

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

  1. .woff로 끝나는 URL을 방문하십시오.

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2. 브라우저가 자동으로 다운로드합니다. CSS 폴더에 저장하십시오.

  1. 이제 icon.css 및 2fcrYFNa .... mY.wof22 두 파일이 있어야 합니다. 둘 다 css에 저장합니다. 이제 css 헤더 위치에서 디렉토리의 icon.css를 편집하십시오. .woff2 파일이 항상 icon.css와 동일한 폴더에 있는지 확인하십시오. 긴 파일 이름을 자유롭게 편집하십시오.

Kaloyan Stamatov 방법이 가장 좋습니다. 먼저 https://fonts.googleapis.com/icon?family=Material+Icons 로 이동합니다 . css 파일을 복사하십시오. 내용은 다음과 같습니다

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.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;
}

글꼴 소스를 브라우저에 붙여 넣어 woff2 파일 https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 를 다운로드 한 다음 원본 소스의 파일을 바꿉니다 . 원하는 경우 이름을 바꿀 수 있습니다. github에서 60MB 파일을 다운로드 할 필요가 없습니다. 죽은 단순 내 코드는 다음과 같습니다.

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(materialIcon.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;
  }

materialIcon.woff2는 다운로드 및 대체 된 woff2 파일입니다.

2019 업데이트 :

머티리얼 아이콘, 일반 아이콘, 둥근 모양, 샤프, 모든 변형을 자체 호스팅합니다. 이 저장소에서 가져 오십시오 : https://github.com/petergng/material-icon-font

어떤 이유로 이러한 글꼴이 Google 저장소에서 쉽게 액세스 할 수 없는지 모르겠습니다.

하지만 여기 있습니다.

패키지를 다운로드 한 후 bin 폴더로 이동하면 네 가지 변형이 표시됩니다. 물론 어느 쪽이든 사용하는 것은 귀하에게 달려 있습니다.

이를 사용하려면 css 파일을 만들고 1. 필요한 각 변형에 대한 글꼴을 생성합니다.

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

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

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

는 url아이콘이 프로젝트에있는 곳으로 연결됩니다.

  1. 이제 아이콘 클래스를 등록합니다.

    .material-icons-outlined, .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; }

이 것 모두 .material-icons-outlined,와 .material-icons클래스는 같은 기본값을 사용합니다. 를 사용 .material-icons-sharp하려면 두 클래스 이름에 추가하면됩니다.

  1. 마지막으로 1 단계에서 가져온 글꼴을 플러그인하겠습니다.

    .material-icons { font-family: 'Material Icons'; }

    .material-icons-outlined { font-family: 'Material Icons Outline'; }

다시 말하지만 Sharp와 같은 더 많은 변형을 사용하려면 위의 두 가지 블록을 추가하면됩니다.

완료되면 html로 이동하여 새로 만든 아이콘을 사용하십시오.

<i class="material-icons-outlined">hourglass_empty</i>

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

참고 URL : https://stackoverflow.com/questions/37270835/how-to-host-material-icons-offline

반응형

'program story' 카테고리의 다른 글

이해하기 쉬운 설명으로 Java에서 실행 가능이란 무엇입니까?  (0) 2020.09.21
할당 된 메모리에서 free ()를 사용하지 * 않아도 * 괜찮습니까?  (0) 2020.09.21
Excel CSV-숫자 셀 형식  (0) 2020.09.21
크라우드 소싱 정렬로 백만 개의 이미지 순위를 매기는 방법  (0) 2020.09.21
UIView 클래스에서 addSubview와 insertSubview의 차이점  (0) 2020.09.21

'program story'의 다른글

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

관련글

댓글

티스토리툴바