Webフロントエンドベクターアイコンの使い方

序文

フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコードを書くのが面倒になります。最近、そのまま使える便利で実用的な方法を見つけました。

1. 画像操作方法の紹介

まずURLを入力します: https://www.iconfont.cn/
この URL を思い出せない場合は、Baidu で「Alibaba ベクトルマップ」を検索すると、この URL が表示されます。
以下では、より一般的に使用され、便利な 2 つの方法をお勧めします。

方法1: フォントクラスの参照

互換性が良好で、IE8+ およびすべての最新ブラウザをサポートします。
クラスはアイコンを定義するために使用されるため、アイコンを置き換えたい場合は、クラス内の画像名参照を変更するだけで済みます。
ただし、基本的にはまだフォントを使用しているため、マルチカラーのアイコンはまだサポートされていません。

ステップ 1: ウェブサイトにアクセスすると、検索ボックスが表示されます。必要なアイコン名を直接入力するか、アイコンライブラリで検索します。

ステップ 2: 次に、ショッピングカートに追加します。

ステップ 3: ショッピングカートをクリックして新しいアイテムを作成し、確認します。後で同じアイテムに写真を追加する場合は、再度作成する必要はありません。

ステップ 4: 次のページが表示されます。コードをコピーし、コードドキュメントを参照します。

<link rel="スタイルシート" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">

ステップ5: コードをインポートするときは、「 http: 」を忘れずに追加してください。

ステップ 6: 対応するアイコンを選択し、クラス名を取得してコピーして貼り付け、no-referrer を使用します" src="/img/bVbB5hz/view" src="https://cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg" title="image.jpg">

<本文>
<i class\="iconfont icon-xxx"></i>
</本文>

方法2: シンボル参照

これは新しい使用方法であり、現在推奨されています。ウェブサイトにも参考となる関連紹介があり、上記の方法 1 と比較すると、次の特徴があります。
単一色に限定されず、複数色のアイコンをサポートします。
いくつかのテクニックを使用すると、フォントと同じようにフォントサイズや色でスタイルを調整できます。
互換性は低く、ie9 以降と最新のブラウザのみをサポートしています。
ブラウザの SVG レンダリングのパフォーマンスは平均的で、PNG よりもさらに悪いです。

ステップ 1: プロジェクトで複数のアイコンを使用する必要がある場合は、使用するアイコンを選択してショッピングカートに追加し、[コードの更新] をクリックして、コード参照リンクを更新することもできます。この方法は、ローカルにダウンロードする必要があります。

ステップ 2: ダウンロード後、フォルダー内のいくつかのファイルを確認し、コードページに js ファイルを導入できます。

 <link rel="スタイルシート" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
    <script src="iconfont.js"></script>

ステップ 3: アイコン参照が有効になるように、ファイルパッケージをプロジェクトと同じディレクトリに配置します。

ステップ 4: 同様に、参照する必要があるアイコンの下の svg ファイル内の画像名をコピーして貼り付け、href="change name" を置き換えます。

 <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-079aiqing"></use>
        </svg>

ステップ 5: コードページでは、上記の 2 つのファイルアドレスをインポートするだけでなく、スタイルコードもインポートする必要があります。

<スタイル>
    .アイコン {
        幅: 1em;
        高さ: 1em;
        垂直位置合わせ: -0.15em;
        塗りつぶし: 現在の色;
        オーバーフロー: 非表示;
    }
</スタイル>

参考までに完全なコードはこちらです

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>Alibaba ベクター画像</title>
    <link rel="スタイルシート" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
    <script src="iconfont.js"></script>
</head>
<スタイル>
    .アイコン {
        幅: 1em;
        高さ: 1em;
        垂直位置合わせ: -0.15em;
        塗りつぶし: 現在の色;
        オーバーフロー: 非表示;
    }
</スタイル>

<本文>
    <input type="text" placeholder="検索">
    <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-079aiqing"></use>
        </svg>
</本文>
</html>

コード効果:

要約:

最初の方法は、インポートして直接使用できます。速くて便利で、ダウンロードする必要がなく、比較的簡単に使用できます。ただし、単一の方法でしか使用できず、色をサポートしていないという欠点があります。
2 番目の方法は複数の色をサポートしており、複数の画像を導入する効果はより高くなります。欠点は、ローカルファイルパッケージにダウンロードして、同じディレクトリに配置してから使用する必要があることです。
一般的に、Alibaba ベクターグラフィックスはフロントエンド開発者にとって非常に役立ち、無料で使用できます。上記の方法は、必要に応じて使用できます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: HTML面接の質問の要約

>>: H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS