ifont アイコンと Fontwesome アイコン

iフォントアイコン

htmlで使用する

1. link タグを使用して CSS を導入します
。例:

2.spanタグを使用し、
各アイコンの専用クラス名として「iconfont icon-XXX」xxxをclass属性に追加します。

ここに画像の説明を挿入
白黒アイコンのネットワーク参照 (オンライン使用、ダウンロード不要)
注: 複数回引用する場合は、最新のリンクアドレスを 1 回だけ引用してください

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2261487_roddifsg59f.css">
</head>
<body>
    <span class="iconfont icon-weixin">

    </span>
    
</body>
</html>

ここに画像の説明を挿入

色付きアイコンへの参照

アドレスを直接参照する方法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://at.alicdn.com/t/font_2261487_roddifsg59f.js"></script>
    <style>
        .icon {
      
      
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
        </style>
</head>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-weixin"></use>
      </svg>
</body>

</html>

ここに画像の説明を挿入

vueで使用される

はじめに: png としてダウンロードするのが最も便利です

Fontクラスをローカルにダウンロード（モノクロ）

優れた互換性、ie8+をサポート
Unicode と比較すると、セマンティクスが明確で、より直感的に記述できます。このアイコンが何であるかは簡単にわかります。
ローカルにダウンロードすると、解凍後のフォルダーのリストは次のようになります。

2. ダウンロードしたファイルを独自のプロジェクトに貼り付けます。フォントアイコンも静的リソースの一部であるため、静的 (またはアセクトディレクトリ) ファイルディレクトリに忘れずに配置してください。
ここに画像の説明を挿入
3. Alibaba Cloud フォントアイコン CSS を main.js ファイルにグローバルに導入します。正しいパスを使用することを忘れないでください。

import Vue from "vue";
import App from "./App.vue";
import "./assets/fonts/iconfont/iconfont";

4. 次のコードをグローバルスタイルシートに追加します。

/*  阿里字体图标设置 */
.icon,
.iconfont {
    
    
  font-family: "iconfont" !important;
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

<p> <i class="icon iconfont icon-youjiantou"></i> </p>

ここに画像の説明を挿入

オンラインのフォントクラス (フレンドリー)

ここに画像の説明を挿入

Index.html で複数の参照を使用する場合は
、アドレスを更新し、前のアイコンが削除されていないことを確認してください。

<link rel="stylesheet" href="//at.alicdn.com/t/font_1261797_48wm20jf8z.css">

フォントアイコンはプロジェクト内で使用できます

<template>    
    <i class="icon iconfont icon-ziyuan"></i>
</template>

ここに画像の説明を挿入

シンボルモード (マルチカラーアイコンをサポート)

ここに画像の説明を挿入
ダウンロードしたファイルを自分のプロジェクトに貼り付けます

ここに画像の説明を挿入
メイン.js

import "../src/assets/font/iconfont";

app.vue

<style scoped>
/*  阿里字体图标设置 */
.icon {
    
    
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

ページ内で使用されている

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

ここに画像の説明を挿入