1. 首頁
  2. 問答
  3. 如何在瀏覽器上呈現md圖標

如何在瀏覽器上呈現md圖標

2017-07-26 48 views
1

我在我的項目中使用了material2和Material圖標。我想知道這些命名圖標如何在瀏覽器中呈現。我已經使用如何在瀏覽器上呈現md圖標

<button md-raised-button><md-icon>mode_edit</md-icon></button>

，並在瀏覽器中，如果我檢查元素

<md-icon class="mat-icon material-icons" role="img" aria-hidden="true">mode_edit</md-icon>

這裏是用來

.mat-icon { 
    background-repeat: no-repeat; 
    display: inline-block; 
    fill: currentColor; 
    height: 24px; 
    width: 24px; 
} 

.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; 
    -webkit-font-feature-settings: 'liga'; 
    -webkit-font-smoothing: antialiased; 
}

的類，但我不能瞭解這些圖標在UI上呈現？ 我只知道md圖標是矢量圖像的字體圖標。有人能解釋它被渲染的方式嗎？

來源

2017-07-26 Sunil Garg

回答

0

找到更多的細節，每material icon's documentation

可以很容易地整合圖標到您的網頁。

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

本例使用名爲ligatures一個排版功能，它允許 渲染圖標字形簡單地通過使用其文本名稱。該 更換由web瀏覽器自動完成的，比同等數字字符參考提供了更多的 可讀的代碼

這裏是計算器

How do ligature icons work in Material Icons?

了詳細的解答

來源

2017-07-28 13:31:30

相關問題

 相關問題