[解決済み] オフラインでマテリアルアイコンをホストする方法は?
質問
非常に単純な質問で申し訳ないのですが、Googleマテリアルのアイコンを
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
?
インターネットに接続されていない状態でも、アイコンを表示できるようにしたい。
解決方法は?
方法2. セルフホスティング デベロッパーガイド
ダウンロード を解凍し、マテリアルデザインのアイコンファイルを含むフォントフォルダをローカルのプロジェクトにコピーしてください。 https://github.com/google/material-design-icons/releases
を使用するだけです。 フォント このフォルダには、さまざまな形式のアイコンフォント(マルチブラウザ対応)とボイラープレートCSSが含まれています。
-
の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 / Bower パッケージ
Googleは公式にBowerとNPMの依存性オプションを用意しています -- Material Icons Guideに続く 1
bowerの使用
:
bower install material-design-icons --save
NPMの使用
:
npm install material-design-icons --save
マテリアルアイコン : また、Material Designのアイコンフォントと、アイコンをセルフホスティングするためのCSSフレームワークを、@mareraさんのサイトから探すこともできます。 https://marella.me/material-icons/
備考
googleはこのプロジェクトをローメンテナンスモードにしているようです。最後の この記事を書いている時点では、3年前にリリースされています。
この件に関してはGitHubにいくつかのissueがありますが、ここでは issue の @cyberalien のコメントを参照してください。
Is this project actively maintained? #951
いくつかのコミュニティプロジェクトに言及しています。 をフォークして、素材アイコンのメンテナンスを続けています。
関連
-
Vueの要素ツリーコントロールに破線を追加する説明
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
Vueのフィルタの説明
-
[解決済み】Uncaught SyntaxError: JSONの位置0に予期しないトークンuがあります。
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
[解決済み] なぜフォントフェイスにttf, eot, woff, svg,...を含める必要があるのでしょうか?
-
[解決済み] Googleフォントのダウンロードとそれを使用するオフラインサイトの設定