วิธีโฮสต์ไอคอนวัสดุออฟไลน์

Question 1

ขออภัยหากนี่เป็นคำถามง่ายๆ แต่คุณจะใช้ไอคอนวัสดุของ Google ได้อย่างไรโดยไม่มีไฟล์

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

เหรอ?

ฉันต้องการให้แอปของฉันสามารถแสดงไอคอนได้แม้ว่าผู้ใช้จะไม่ได้เชื่อมต่ออินเทอร์เน็ตก็ตาม

Question 2

วิธีที่ 2. คู่มือสำหรับนักพัฒนาโฮสติ้งด้วยตนเอง

ดาวน์โหลดรุ่นล่าสุดจาก github (assets: ไฟล์ zip) เปิดเครื่องรูดและคัดลอกโฟลเดอร์ iconfont ที่มีไฟล์ไอคอนการออกแบบวัสดุลงในโครงการในเครื่องของคุณ - https://github.com/google/material-design-icons/ เผยแพร่

คุณจะต้องใช้โฟลเดอร์iconfontจากไฟล์เก็บถาวร: ประกอบด้วยแบบอักษรไอคอนในรูปแบบต่างๆ (สำหรับการสนับสนุนเบราว์เซอร์หลายตัว) และเอกสารสำเร็จรูป css

แทนที่ซอร์สในแอตทริบิวต์ url ของ @ font-face ด้วยพา ธ สัมพัทธ์ไปยังโฟลเดอร์ 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 :bower install material-design-icons --save

ใช้ NPM :npm install material-design-icons --save

ไอคอนวัสดุ : หรือดูแบบอักษรไอคอนการออกแบบวัสดุและกรอบ CSS สำหรับการโฮสต์ไอคอนด้วยตนเองจากhttps://marella.me/material-icons/ของ @ marella

บันทึก

ดูเหมือนว่า Google จะมีโครงการในโหมดการบำรุงรักษาต่ำ รุ่นล่าสุดคือตอนที่เขียนเมื่อ 3 ปีที่แล้ว!

มีปัญหาหลายประการใน GitHub เกี่ยวกับเรื่องนี้ แต่ฉันต้องการอ้างถึงความคิดเห็นของ @cyberalien ในประเด็นIs this project actively maintained? #951ที่กล่าวถึงโครงการชุมชนหลายโครงการที่แยกและยังคงรักษาไอคอนวัสดุ

Question 3

ฉันกำลังสร้าง Angular 4/5 และมักทำงานแบบออฟไลน์ดังนั้นสิ่งต่อไปนี้จึงเหมาะกับฉัน ขั้นแรกให้ติดตั้ง NPM:

npm install material-design-icons --save

จากนั้นเพิ่มสิ่งต่อไปนี้ใน styles.css:

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

Question 4

วิธีการด้านบนไม่ได้ผลสำหรับฉัน ฉันดาวน์โหลดไฟล์จาก 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;
}

ฉันเปิดลิงค์ url แบบอักษร woff 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');
}

นั่นทำให้สิ่งต่างๆได้ผลสำหรับฉัน

Question 5

หากคุณใช้โครงการ webpack หลังจากนั้น

npm install material-design-icons --save

คุณเพียงแค่ต้อง

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

Question 6

นี่อาจเป็นทางออกที่ง่าย

รับที่เก็บนี้ซึ่งเป็นส่วนแยกของที่เก็บดั้งเดิมที่ Google เผยแพร่

ติดตั้งด้วย bower หรือ npm

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

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

นำเข้าไฟล์ css บนหน้า HTML ของคุณ

<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">

Question 7

สูตรของฉันมีสามขั้นตอน:

เพื่อติดตั้งแพ็คเกจ Material-design-icons
```
npm install material-design-icons
```
เพื่อนำเข้าไฟล์ material-icons.css ไปยังไฟล์ / โครงการ .less หรือ. scss
```
@import "~/node_modules/material-design-icons/iconfont/material-icons.css";
```
เพื่อรวมโค้ดที่แนะนำไว้ในไฟล์ / project reactjs .js
```
<i className='material-icons' style={{fontSize: '36px'}}>close</i>
```

Question 8

ใช้material-design-icons-iconfont

การเปิดเผยข้อมูลทั้งหมดฉันเป็นผู้เขียนแพ็คเกจนี้

ของ Google วัสดุการออกแบบไอคอนโครงการในการบำรุงรักษาต่ำ และออกจากวันที่ในขณะที่ มีช่องว่างระหว่างรุ่นในเป็น https://material.io/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>

อ่านคำแนะนำทั้งหมดเกี่ยวกับแบบอักษรการออกแบบวัสดุไอคอนไอคอนสำหรับวิธีการนำเข้าเพิ่มเติม

หน้าสาธิต

มันมาพร้อมกับหน้าสาธิตเบา ๆเพื่อช่วยในการค้นหาและคัดลอกแบบอักษร

ภาพ

Question 9

ฉันพยายามรวบรวมทุกสิ่งที่ต้องทำสำหรับไอคอนโฮสติ้งด้วยตนเองในคำตอบของฉัน คุณต้องทำตาม 4 ขั้นตอนง่ายๆเหล่านี้

เปิดโฟลเดอร์ iconfont ของที่เก็บที่เป็นรูปธรรม

link- https://github.com/google/material-design-icons/tree/master/iconfont
ดาวน์โหลดไฟล์ไอคอนทั้งสามนี้ ->

MaterialIcons-Regular.woff2 - รูปแบบ ('woff2')

MaterialIcons-Regular.woff - รูปแบบ ('woff')

MaterialIcons-Regular.ttf - รูปแบบ (' truetype ');

หมายเหตุ - หลังจากดาวน์โหลดคุณสามารถเปลี่ยนชื่อเป็นอะไรก็ได้ที่คุณต้องการ
ตอนนี้ไปที่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 (... ) ควรเป็นไปตาม "ไฟล์ CSS" ไม่ใช่ไฟล์ index.html ตัวอย่างเช่นสามารถเป็น src: url (../ myicons / MaterialIcons-Regular.woff2)

คุณพร้อมที่จะใช้แล้วและนี่คือวิธีที่สามารถทำได้ใน HTML

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

ขยายข้อมูลโค้ด

คลิกที่นี่เพื่อดูไอคอนทั้งหมดที่สามารถใช้ได้

Question 10

หลังจากเสร็จสิ้น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';
}

Question 11

ด้วย 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 -> styles

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

หรือหากคุณติดตั้ง material-desing-icons-icon แบบอักษรแล้ว

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

Question 12

อัปเดต 2019 ที่นี่:

ในการโฮสต์ไอคอนวัสดุของคุณด้วยตนเองไอคอนปกติ, โค้งมน, คมชัด, รูปแบบทั้งหมด ไปรับจาก repo นี้: https://github.com/petergng/material-icon-font

ด้วยเหตุผลบางประการฉันไม่รู้ว่าทำไมฟอนต์เหล่านี้ไม่สามารถเข้าถึงได้ง่ายจากที่เก็บของ Google

แต่นี่คุณไป

หลังจากดาวน์โหลดแพ็คเกจแล้วให้ไปที่โฟลเดอร์ bin และคุณจะเห็นสี่ตัวแปร แน่นอนขึ้นอยู่กับคุณว่าจะใช้แบบไหน

หากต้องการใช้ให้สร้างไฟล์ css และ

สร้างแบบอักษรสำหรับแต่ละตัวแปรที่คุณต้องการ:

@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ลิงก์จะไปยังที่ที่ไอคอนที่มีอยู่ในโครงการของคุณ

ตอนนี้ให้ลงทะเบียนคลาสไอคอน:

.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

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

Question 13

ในhttp://materialize.com/icons.htmlข้อมูลส่วนหัวของสไตล์ที่คุณรวมไว้ในเพจคุณสามารถไปที่ไฮเปอร์ลิงก์จริงและสร้างสำเนาที่แปลเป็นภาษาท้องถิ่นเพื่อใช้ไอคอนออฟไลน์

นี่คือ how.NB: คุณจะดาวน์โหลดไฟล์ที่สองในทุกicon.cssและsomefile.woff

ไปที่ URL ต่อไปนี้ตามต้องการในส่วนหัว

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

บันทึกหน้าเป็น what_filename.css ค่าเริ่มต้นคือ icon.css

มองหาเส้นแบบนี้

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

ไปที่ URL ที่มี. woff ปิดท้าย

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2. เบราว์เซอร์ของคุณจะดาวน์โหลดโดยอัตโนมัติ บันทึกไว้ในโฟลเดอร์ CSS ของคุณ

ตอนนี้คุณควรมีสองไฟล์icon.cssและ2fcrYFNa .... mY.wof22บันทึกทั้งสองไฟล์ใน css ของคุณ ตอนนี้ทำการแก้ไขในตำแหน่งส่วนหัว css ของคุณไปที่ icon.css ในไดเรกทอรีของคุณ ตรวจสอบให้แน่ใจว่าไฟล์. woff2 อยู่ในโฟลเดอร์เดียวกับ icon.css เสมอ อย่าลังเลที่จะแก้ไขชื่อไฟล์แบบยาว

Question 14

หัวข้อคำถามถามวิธีโฮสต์ไอคอนวัสดุออฟไลน์ แต่เนื้อหาชี้แจงว่าวัตถุประสงค์คือใช้ไอคอนวัสดุออฟไลน์(เน้นของฉัน) (เหมืองเน้น)

การใช้สำเนาไฟล์ไอคอนวัสดุของคุณเองเป็นแนวทาง / การนำไปใช้ที่ถูกต้อง อีกประการหนึ่งสำหรับผู้ที่สามารถใช้พนักงานบริการได้คือการให้พนักงานบริการดูแล ด้วยวิธีนี้คุณจะไม่ต้องยุ่งยากในการขอสำเนาและอัปเดตอยู่เสมอ

ตัวอย่างเช่นสร้างผู้ปฏิบัติงานบริการโดยใช้Workboxโดยใช้วิธีการที่ง่ายที่สุดในการเรียกใช้ workbox-cli และยอมรับค่าเริ่มต้นจากนั้นต่อท้ายข้อความต่อไปนี้กับผู้ให้บริการที่สร้างขึ้น:

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

จากนั้นคุณสามารถตรวจสอบได้ว่าแคชใน Chrome โดยใช้ F12> Application> Storage> IndexedDB และมองหารายการที่มี googleapis ในชื่อ

Question 15

ในปี 2020 แนวทางของฉันคือการใช้แพ็คเกจmaterial-icons-font มันง่ายของการใช้งานของ Google วัสดุการออกแบบไอคอนแพคเกจและชุมชนตามวัสดุการออกแบบไอคอน-iconfont

ติดตั้งแพคเกจ npm install material-icons-font --save
เพิ่มเส้นทางของไฟล์ CSS ของแพ็คเกจไปยังคุณสมบัติสไตล์ของไฟล์ angular.json ของโปรเจ็กต์ของคุณ

... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...
หากใช้ 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';

ใช้ไอคอนในไฟล์ 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>

ไอคอนจาก @ เชิงมุม / วัสดุมักจะแตกเมื่อพัฒนาออฟไลน์ การเพิ่มแพ็คเกจ material-icons-font ร่วมกับ @ angular / material ช่วยให้คุณใช้แท็กในขณะที่พัฒนาแบบออฟไลน์

Question 16

ติดตั้งแพ็คเกจ npm

npm install material-design-icons --save

ใส่พา ธ ไฟล์ css ไปยังไฟล์ styles.css

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

Question 17

วิธี 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 จากนั้นแทนที่ไฟล์ในต้นฉบับ คุณสามารถเปลี่ยนชื่อได้หากต้องการไม่จำเป็นต้องดาวน์โหลดไฟล์ 60MB จาก github Dead simple รหัสของฉันมีลักษณะเช่นนี้

@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 ที่ดาวน์โหลดและแทนที่

Question 18

npm install material-design-icons

และ

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

ทำงานให้ฉันด้วย Angular Material 8

Question 19

เพิ่มสิ่งนี้ลงในการกำหนดค่าเว็บและข้อผิดพลาดก็หายไป

<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>

Question 20

โดยวิธีการมีวิดีโอใน youtube พร้อมคำแนะนำทีละขั้นตอน

https://youtu.be/7j6eOkhISzk

นี่คือขั้นตอน ดาวน์โหลดแพ็คเกจไอคอน Materialize จากhttps://github.com/google/material-design-icons/releases
คัดลอกโฟลเดอร์ไอคอนแบบอักษรและเปลี่ยนชื่อเป็นไอคอน
เปิดไฟล์ materialize.css และอัพเดตพา ธ ต่อไปนี้:

ก. จาก url (MaterialIcons-Regular.eot) เป็น url (../ แบบอักษร / MaterialIcons-Regular.eot) b. จาก url (MaterialIcons-Regular.woff2) รูปแบบ ('woff2') เป็น url (../ แบบอักษร / MaterialIcons-Regular.woff2) รูปแบบ ('woff2') c. จากรูปแบบ url (MaterialIcons-Regular.woff) ('woff') เป็น url (../ แบบอักษร / MaterialIcons-Regular.woff) ('woff') ง. จากรูปแบบ url (MaterialIcons-Regular.ttf) ('truetype') เป็น url (../ แบบอักษร / MaterialIcons-Regular.ttf) ('truetype')

คัดลอก materialize-icon.css ไปยังโฟลเดอร์ css ของคุณและอ้างอิงในไฟล์ html ของคุณ

ทุกอย่างจะทำงานเหมือนมีเวทมนตร์!

วิธีโฮสต์ไอคอนวัสดุออฟไลน์

ใช้material-design-icons-iconfont

ติดตั้งผ่าน npm

หน้าสาธิต

ติดตั้งผ่าน `npm`