1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～ - Qiita
1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～JavaScriptes6FontAwesomewebpackbabel 概要 Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。 本稿では、node.js環境での開発を前提としたWebフロントエンド開発で Font Awesome5 を使う時のポイントを説明します。Font Awesomeはv5になってフロントエンド開発との連携機能が大幅強化され、お手軽にJavaScriptのバンドルにフォントを埋め込むことができます。 Font Awesomeのアイコンを使う（バンドルする）には以下の3ステップを踏みます。
CSSのみでアイコンフォント風の図柄を表示できる「CSS ICON」の使い方
CSS ICONとは CSS ICONは、CSSのみで描画されたアイコンを表示させることができるコードが集められたアイコン集です。 この記事を書いた2016年11月時点では500以上のアイコンを利用することができます。 CSSのみで描かれたものということなので、思いっきり簡素なものと思いきや、かなり実用的なアイコンがそろっています。 CSS ICONの使い方 アイコンを利用するには、まずCSS ICON利用したいアイコンを選択します。 すると、画面右側に「アイコンを利用するためのコード」が表示されます。 CSSをコピペ これを利用するには、まずCSSをコピーします。 すると、以下のようなコードがクリップボードに貼り付けられるので、CSSファイルなどに貼り付けます。 .heart.icon { color: #000; position: absolute; margin-top: 6px;
まだ画像テキスト使ってるの？ アクセシビリティとSEO両立のベストプラクティス
かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。 Rathiの記事にヒントを得て、次の課題を挙げてみました。 画像変換
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Web開発者必見】Font Awesome 5の無料版リリース時期が判明！ | BomBox
