1. ブラウザのデバッグ ツールを開き、小さなアイコン font-awesome ユーザーを見つけます。その CSS スタイルは です。
icon-user:before { content: "\f007";}[class^="icon-"]:before, [class*=" icon-"]:before { text-decoration: inherit; display: inline-block; speak: none;}
すごいです2. CSS ファイルのパスに従って、font-awesome.css を開きます。 css3 @font-face この属性を参照します。
パスは url('../font/fontawesome-webfont.svg#fontawesome Regular?v=3.2.1') です。 format( 'svg');3. src: url() をたどってアイコン svg を見つけます
sublime を使用してパスの下の svg 画像を開きます。SVG は XML 形式であるため、通常は XML ツールやライブラリで実行される変換と生成をサポートできます。特定のチュートリアルのリンク: XML 質問: SVG を使用したプログラミング
@font-face { font-family: 'FontAwesome'; src: url('../font/fontawesome-webfont.eot?v=3.2.1'); src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); font-weight: normal; font-style: normal;}
4. コンテンツ: 'f007' が上記の unicode="oo7" に対応していることがわかりました。これを書くと、font-awesome のアイコンがどこから来たのかが明確になったかもしれませんが、まだ少し混乱しているはずです:
svg 画像とは何ですか? どのように生成されるのでしょうか?すべてのアイコンを 1 つの SVG イメージにすることに何の意味がありますか?
CSS スプライトとの違いは何ですか?
はは、実は他の皆さんと同じように、私もとても興味があったので、たくさんの書類をチェックしました。何人かのマスターがすでにそれを研究していることが判明しました。一つずつリンクを貼っていきます
css-sprite1 まず、css スプライトとは何ですか? css スプライトは、css スプライトまたは css スプライトとも呼ばれ、背景画像をステッチするテクノロジーです。 CSS スプライト画像を使用すると、各 http リクエストが長い接続になるため、これは非常に重要です。たとえば、一部のショッピング Web サイトで非常に多くのアイコンが導入されると、HTTP のオーバーヘッドが非常に大きくなります。タグを付けた場合、悲惨な結果になるでしょう。 css-sprite の設計は、ページのアクセス速度と Web サイトのリクエスト リソースのオーバーヘッドを改善することです。
2. css-sprite 実装の原理 css-sprite は、新しい CSS3 属性、background-position によって実装され、background-size を設定することで小さなアイコンを切り取ることができます。位置 特定の小さいアイコンを配置しましょう
3. CSS スプライトの作成方法
1. オンライン MOOC に Yuanren 先生による CSS スプライトの作成方法を教えるビデオがあります。ポータル: CSS Sprite スプライト アプリケーション2. Windows 開発者は、Baidu CSS スプライト作成ツールを直接使用でき、多くのツールがあります。
3. Sass でコンパイルする学生は、コンパスを直接使用して CSS スプライト画像、チュートリアルのリンクアドレスを自動的にマージできます
4. PS と AI を使用して手動でパズルを解くことができます
4. CSS スプライトの欠点 : 間のコスト比較パズルとアフターメンテナンスが大きい。
svg スプライトを使用できます
今後注目されるでしょう: SVG スプライトの紹介テクノロジー
概要: シンボル + 使用 => SVG スプライト。また、HTML レベルでは、アイコンのコード コストは従来の CSS スプライトや一般的なフォントフェイスとほぼ同じです。コードはシンプルで保守が簡単です。すべての SVG アイコンは 1 つの SVG ソース上にあります。 Retina は優れており、サイズを任意に拡大でき、色を制御できます。これはまさに Web アイコンの将来のスターです。<glyph unicode="" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />ログイン後にコピー