sourcecode

재료 아이콘을 오프라인으로 호스팅하는 방법은?

copyscript 2023. 9. 21. 21:11
반응형

재료 아이콘을 오프라인으로 호스팅하는 방법은?

이것이 매우 간단한 질문이라면 미안하지만, 당신은 어떻게 구글 재료 아이콘을 사용할 것인가요?

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

?

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

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

Release 4가 조금 변경되었으니 권장 포맷과 호스팅 솔루션을 조사해주세요.

github(assets: zip 파일)에서 릴리스 3.0.2를 다운로드한 후 압축을 풀고 재료 디자인 아이콘 파일이 들어 있는 글꼴 폴더를 로컬 프로젝트에 복사합니다. https://github.com/google/material-design-icons/releases

보관소의 글꼴 폴더만 사용하면 됩니다. 아이콘 글꼴은 여러 가지 형식(여러 브라우저 지원용)과 boilerplate cs에 포함되어 있습니다.

  • URL의 바꾸기@font-face에 대한 경로 () 를합니다).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/바워 패키지

Google은 공식적으로 Bower 및 NPM 의존성 옵션을 가지고 있습니다 -- Follow Material Icons Guide 1

바우어 사용:bower install material-design-icons --save

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

자료 아이콘 : @ marella's https://marella.me/material-icons/ 에서 자료 디자인 아이콘 글꼴과 아이콘 자체 호스팅을 위한 CSS 프레임워크를 살펴보시기 바랍니다.

메모

구글에서 낮은 유지보수 모드로 프로젝트를 진행하고 있는 것 같습니다.마지막 발매는, 글을 쓸 당시, 3년 전의 일입니다!

이와 관련하여 GitHub에 몇 가지 문제가 있지만, @cyberalien comment를 참고하고자 합니다. 여기서 @cyberalien comment는 자료 아이콘을 포크하고 계속 유지하는 여러 커뮤니티 프로젝트를 언급합니다.

저는 Angular 4/5를 위해 빌드하고 있으며 종종 오프라인으로 작업하기 때문에 다음과 같은 작업이 가능했습니다.먼저 NPM을 설치합니다.

npm install material-design-icons --save

그런 다음 style.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');
}

그게 저한테 효과가 있어요.

2020년 현재 저의 접근 방식은 material-icon-font 패키지를 사용하는 것입니다.구글의 재료 디자인 아이콘 패키지와 커뮤니티 기반 재료 디자인 아이콘 아이콘의 사용을 단순화합니다.

  1. 패키지를 설치합니다.npm install material-icons-font --save

  2. 패키지의 CSS 파일 경로를 프로젝트의 angular.json 파일의 스타일 속성에 추가합니다.

    ... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...

  3. SCSS를 사용하는 경우 아래 내용을 styles.scss 파일의 맨 위에 복사합니다.

    @import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

  4. 프로젝트의 HTML 파일에 있는 아이콘을 사용합니다.

    // Using icon tag
<i class="material-icons">face</i>
<i class="material-icons md-48">face</i>
<i class="material-icons md-light md-inactive">face</i>

// Using Angular Material's <mat-icon> tag
<mat-icon>face</mat-icon>
<mat-icon>add_circle</mat-icon>
<mat-icon>add_circle_outline</mat-icon>

@angular/material의 아이콘은 오프라인 개발 시 깨지는 경향이 있습니다.@angular/material과 함께 material-icon-font 패키지를 추가하면 오프라인 개발 중에 태그를 사용할 수 있습니다.

webpack project를 사용하는 경우,

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 파일의 본문 태그 안에 아이콘 추가

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

얼굴 아이콘을 보시면 괜찮아요.

작동하지 않는 경우 이를 추가해 보십시오...node_modules로:

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

피하려면

npm i material-design-icons

구글은 npm 저장소에 새로운 버전을 게시하고 있지 않으므로 마지막 게시가 5년 전이었으므로 사용을 피하시기 바랍니다.

사용방법

  1. 레포에서 필요한 글꼴을 다운로드합니다.확장자는 무시해도 됩니다.주의하세요, 그들은 그들이 가지고 있지 않습니다..woff2그리고..woff더이상 타이핑을 하지 않지만,.ttf아니면.otf 잘 작동합니다.
  2. 자산 폴더에 추가
  3. CSS 파일에 다음을 추가합니다.
@font-face {
  font-family: 'Material Icons';
  font-weight: 400;
  font-style: normal;
  src: local('Material Icons'), local('MaterialIcons-Regular'),
    url('/assets/fonts/MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
  display: inline-block;
  font-family: 'Material Icons';
  font-size: 24px; /* Preferred icon size */
  font-weight: normal;
  line-height: 1;
  font-style: normal;
  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';
}
  1. 그 다음에 추가합니다..material-icons
<i class="material-icons">face</i>

는 를 가 없습니다..material-icons그들이 이미 사용하고 있다면mat-icon

아웃라인과 레귤러 동시에

개요와 일반적인 것 둘 다?
단계는 이렇습니다.

는 sscs 를를 @extend귀찮아서 그런 방법.

@font-face {
  font-family: 'Material Icons Outlined';
  font-weight: 400;
  font-style: normal;
  src: local('Material Icons Outlined'), local('MaterialIconsOutlined-Regular'),
    url('/assets/fonts/MaterialIconsOutlined-Regular.otf') format('truetype');
  font-display: fallback;
}

.material-icon {
  // Same content as the previous example without the `font-family`
}

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

.material-icons-outlined {
  @extend .material-icon;
  font-family: 'Material Icons Outlined';
}

<mat-icon class="material-icons-outlined" svgIcon="dark_mode-outline"></mat-icon>

재료-디자인-아이콘-아이콘 사용

전체 공개, 저는 이 패키지의 저자입니다.

구글의 재료 디자인 아이콘 프로젝트는 유지보수가 저조하고 한동안 구식입니다.https://material.io/icons/ 의 버전과 재료 디자인 아이콘의 버전 사이에는 차이가 있습니다.

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

  • 재료 디자인 아이콘의 잼npm install -는 svg/xml/...되었습니다.
  • 입니다에서 입니다.Google FontsCDN
  • sscs 지원

다음을 통해 설치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">+ +콘 ID +</i> 

<i class="material-icons">contact_support</i>
  • 자세한 가져오기 방법은 재료-디자인-아이콘-아이콘에 대한 전체 지침을 읽습니다.

데모페이지

글꼴을 검색하고 복사할 수 있도록 가벼운 데모 페이지와 함께 제공됩니다.

image

제 요리법에는 세 단계가 있습니다.

  1. 재료 디자인 아이콘 패키지를 설치하다

    npm install material-design-icons

  2. material-icons. css 파일을 .less 또는 .scss 파일/project로 가져옵니다.

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

  3. reactjs.js 파일/프로젝트에 추천 코드를 포함시키다

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

저는 제 답변에 셀프 호스팅 아이콘을 위해 해야 할 모든 것을 정리하려고 노력했습니다.당신은 이 4가지 간단한 단계를 따라야 합니다.

  1. 구체화 저장소의 아이콘 글꼴 폴더 열기

    link- https://github.com/google/material-design-icons/tree/master/iconfont

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

    재료 아이콘-규칙.woff2 - 형식 ('woff2')

    재료 아이콘-규칙.woff - 형식 ('woff')

    재료 아이콘-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>

사용할 수 있는 모든 아이콘을 보려면 여기를 클릭하세요.

2019년 업데이트 내용:

재료 아이콘, 일반 아이콘, 둥근 모양, 날카로운 모양 등 다양한 모양의 아이콘을 자체 호스팅할 수 있습니다.이 보고서에서 가져오세요: https://github.com/petergng/material-icon-font

어떤 이유에서인지 구글 저장소에서 이 글꼴들을 쉽게 접근할 수 없는 이유를 모르겠습니다.

하지만 여기 있습니다.

패키지를 다운로드한 후 빈 폴더로 이동하면 4가지 변형이 나타납니다.물론, 어느 쪽을 사용하든지 당신에게 달려있습니다.

그것들을 사용하려면 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';
}

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

작업이 완료되면 html로 이동하여 새로 주조된 아이콘을 사용합니다.

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

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

난 후에.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 -> projects -> architect -> style에 추가합니다.

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

또는 material-design-icons-icons-confont를 설치한 경우

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

페이지에 포함된 스타일 헤더 정보인 http://materialize.com/icons.html 에서 실제 하이퍼링크로 이동하여 오프라인에서 아이콘을 사용할 수 있습니다.

건배!.NB: 두 개의 파일을 all icon.css 및 some file.woff에 다운로드합니다.

  1. 헤더에서 필요에 따라 다음 URL로 이동합니다.

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

페이지를 what_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. 이제 두 개의 파일 아이콘.css와 2fcrYFNa...이 있어야 합니다.내 22년생, 둘 다 CSS에 저장해요이제 css 헤더 위치에서 디렉토리의 icon.css로 편집합니다..woff2 파일이 icon.css와 항상 같은 폴더에 있는지 확인합니다.긴 파일 이름을 자유롭게 편집할 수 있습니다.

질문 제목은 오프라인에서 재료 아이콘을 호스팅하는 방법을 묻지만 본문은 재료 아이콘을 오프라인에서 사용하는 것이 목표임을 분명히 합니다(내 질문에 강조 표시).

재료 아이콘 파일의 복사본을 사용하는 것은 유효한 접근/구현 방법입니다.다른 하나는 서비스 종사자를 이용할 수 있는 분들은 서비스 종사자가 알아서 하도록 하는 것입니다.이렇게 하면 복사본을 가져와 최신 상태로 유지할 필요가 없습니다.

예를 들어 Workbox-cli를 실행하고 기본값을 받아들이는 가장 간단한 방법을 사용하여 Workbox를 사용하여 서비스 작업자를 생성한 다음 생성된 서비스 작업자에 다음 텍스트를 추가합니다.

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가 있는 항목을 검색할 수 있습니다.

칼로얀 스타마토프 방법이 최고입니다.먼저 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;
}

재료 Icon.woff2는 다운로드되어 교체된 woff2 파일입니다.

저는 이 패키지(@mdi/font)를 사용하여 main.js로 가져오기를 통해 해결했습니다.

import '@mdi/font/css/materialdesignicons.css'

각진 소재의 프로젝트에서 저도 마찬가지로 어려움을 겪던 중에 오프라인에서 작업할 수 있는 솔루션을 생각해 냈는데, 자세한 내용은 저장해 두었습니다.

리소스를 다운로드한 후 README.md 파일에서 다음 단계만 수행하면 됩니다.

STEP 1

배포물을 프로젝트에 복사합니다.

STEP 2

angular.json imports 배열의 스타일시트 가져오기

예

`angular.json [
        {
            style[
                "css/material.css", "css/icons.css"
            ]
        } `

STEP 3

다음 자동 재로드 후 아이콘이 오프라인으로 표시됩니다.

Optionally 이 를 빼도 , .https://fonts.gstatic.com https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap https://fonts.googleapis.com/icon?family=Material+Iconsm에서index.html일.

HAPPYCODING :)

ngMatIcon 오프라인 저장소를 만들었습니다. 이 링크에서 다운로드 가능합니다.:)

누군가에게 도움이 될 경우를 대비해서 이걸 추가하는 건...사용자의 경우에는 효과가 없을 수 있지만 다른 사용자에게는 효과가 있을 수 있습니다.저는 materialize를 사용하는 앱을 사용하는 오프라인 컴퓨터가 있습니다.저도 이 문제를 해결하려고 했는데, 그 github repo가 커서 모든 지시를 따르는데 어려움을 겪고 있었습니다.,.<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">태그가 오프라인 컴퓨터에서 앱을 여는 속도를 늦추고 있었습니다. 그 파일을 계속 다운로드하려고 했지만 다운로드할 수 없었습니다.

제가 한 일은 이렇습니다(이 댓글 하단의 작업 예시)

  1. https://fonts.googleapis.com/icon?family=Material+Icons 에서 파일을 다운로드하고 웹사이트 디렉토리에 로컬 CSS 파일로 저장합니다.이 파일은 3단계에서 설명한 바와 같이 한 번의 수정이 필요합니다.
  2. 를 합니다.<link>꼬리표로 삼다index.html1단계에서 저장한 파일을 가리킵니다. (예를 들어, https://fonts.googleapis.com/icon?family=Material+Icons 을 assets/materialize_offline_files/materialize-icons.css에 저장한 다음 index에 추가했습니다. html:<link href="assets/css/materialize_offline_files/materialize-icons.css" rel="stylesheet"> rel="stylesheet">.) 참고: materialize.css를 가져오기 전에 이 링크 태그를 추가해야 합니다.
  3. 1단계부터 파일로 수정합니다.https://fonts.googleapis.com/icon?family=Material+Icons, 의 파일을 보면 폴백 폰트에 대한 CSS 코드 라인을 찾을 수 있습니다.src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');. 해당 src URL에 있는 파일을 다운로드하고 https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2, 에서 materialize_icons. css(1단계의 파일)와 동일한 디렉토리에 저장한 후 해당 코드 라인을 다음으로 변경합니다.src: url("flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');

작업 예제(4개 파일):

색인을 보다

<!DOCTYPE html>
<html>
<head>
    <link href="assets/css/materialize_offline_files/materialize-icons.css" rel="stylesheet">
    <link href="assets/css/materialize.min.css" rel="stylesheet">
</head>
<body>
    <button class="btn waves-effect waves-light">Hello!
            <i class="material-icons right">send</i>
    </button>
</body>
</html>

assets/css/materialize_offline_files/materialize-아이콘을 선택합니다.

/*
 * File downloaded from https://fonts.googleapis.com/icon?family=Material+Icons
 * with slight modification (src url of fallback font)
 */

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  /**src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');*/
  src: url("flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
  /**
   * flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 is the file
   * downloaded from 
   * https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
   * NOTE:: css src url attributes are relative to the css file,
   * so store flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
   * IN THE SAME DIR as this css file, for that modification to work.
   */
}

.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;
}

마지막으로(남은 파일 2개) 파일이 있는지 확인합니다.

  • assets/css/materialize.min.css (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css) 에서 download합니다.
  • assets/css/materialize_offline_files/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 (https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 에서 download합니다.

저는 이것이 fonts.googleapis.com 에 전화를 걸어 제 앱의 속도를 늦추는 문제를 없앨 수 있을 것이라고 생각했습니다. 하지만 실제로 제가 사용하는 몇 개의 아이콘이 지금 오프라인 컴퓨터에 나타나고 있습니다.모든 아이콘에 적용될 수 있을지는 모르겠지만, 저는 효과가 있습니다.

npm 패키지 설치

npm install material-design-icons --save

styles.css 파일에 css 파일 경로를 넣습니다.

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

그런데 유튜브에 단계별 설명이 있는 동영상이 있습니다.

https://youtu.be/7j6eOkhISzk

  1. 이것들이 단계입니다.https://github.com/google/material-design-icons/releases 에서 materialize 아이콘 패키지 다운로드

  2. 아이콘 글꼴 폴더를 복사하고 아이콘 이름을 바꿉니다.

  3. materialize.css 파일을 열고 다음 경로를 업데이트합니다.

a. url(MaterialIcons-Regular.eot)에서 url(.../fonts/MaterialIcons-Regular.eot) b로 이동합니다.woff2) 형식('woff2')에서 URL(../fonts/MaterialIcons-Regular)로 이동합니다.woff2) 형식('woff2') c. url(MaterialIcons-Regular.woff) 형식에서 url(../fonts/MaterialIcons-Regular.woff) 형식으로('woff2') c. url(MaterialIcons-Regular.tf) 형식에서 url(../fonts/MaterialIcons-Regular.tf) 형식으로('troughtype') d.

  1. materialize-icon.css를 css 폴더에 복사하여 html 파일에 참조합니다.

모든 것이 마법처럼 작동할 것입니다!

나는 만류를 피하기 위해 아파치를 사용한 게으른 해결책을 선택했습니다.

<link href="https://MYHOST/gfonts/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://MYHOST/gfonts/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

작은 Apache 플러그인 추가

a2enmod substitute

그리고 내 아파치 구성에서

AddOutputFilterByType INFLATE;SUBSTITUTE;DEFLATE text/html text/plain text/xml text/css
Substitute "s|https://fonts.gstatic.com/|/gsfonts/|i"
SSLProxyEngine on
ProxyPass "/gfonts/"  "https://fonts.googleapis.com/"
ProxyPassReverse "/gfonts/"  "https://fonts.googleapis.com/"
ProxyPass "/gsfonts/"  "https://fonts.gstatic.com/"
ProxyPassReverse "/gsfonts/"  "https://fonts.gstatic.com/"

여기 있는 답들은 모두 오래된 것들입니다.2023년에는 material-icon npm 패키지를 원합니다.material-design-icons. 유지보수가 훨씬 더 잘 되고 자동으로 업데이트됩니다.

npm install material-icons --save

작동시키는 코드의 한 줄입니다.

import 'material-icons/iconfont/material-icons.css';

오어

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

다른 방법으로 작동할 수 있지만 자세한 내용은 링크된 문서를 참조하십시오.

npm install material-design-icons

그리고.

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

Angular Material 8로 저도 일했습니다.

이것을 웹 구성에 추가하면 오류가 사라집니다.

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

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

반응형

'sourcecode' 카테고리의 다른 글

iframe 응답성 확보  (0) 2023.09.21
목록 맨 앞에 jquery를 추가합니다.  (0) 2023.09.21
table_y에 의해 실행되는 트리거를 사용하여 table_x의 모든 엔트리를 삭제하는 방법  (0) 2023.09.21
sql 쿼리를 통해 오라클에서 타임스탬프 유형의 열을 업데이트하려면 어떻게 해야 합니까?  (0) 2023.09.21
Maria db 원격 액세스  (0) 2023.09.21

'sourcecode'의 다른글

  • 현재글재료 아이콘을 오프라인으로 호스팅하는 방법은?

관련글

댓글

티스토리툴바