8

私はWebデザインと開発に不慣れで、さまざまなスタイリング手法を試してきました。調査の過程で、アイコンフォントに出くわしました。多くのチュートリアルやビデオを調査しましたが、何時間もの努力にもかかわらず、アイコンフォントをうまく利用することができませんでした。

まず、多数のアイコンフォントを提供しているサイトにアクセスし、気に入ったものを選択して生成し、最後にフォルダーにダウンロードしました。しかし、これらのアイコンフォントがフォルダにあるので、どうすればよいですか？

4

1 に答える 1

12

ステップバイステップガイドは次のとおりです。

Font Squirrelに移動し、@font-faceキットをダウンロードします。解凍し、名前を「fonts」に変更して、htmlファイルと同じディレクトリに配置します。

これをhtmlファイルとして使用します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    @font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('fonts/modernpics-webfont.eot');
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/modernpics-webfont.woff') format('woff'),
         url('fonts/modernpics-webfont.ttf') format('truetype'),
         url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    li {
      list-style-type: none;
    }
    [data-icon]:before {
      font-family: 'ModernPictogramsNormal';
      content: attr(data-icon);
      speak: none;
      padding:0 5px;
    }
    </style>
</head>
<body>
  <ul>
    <li data-icon="^">RSS</li>
    <li data-icon="*">Star</li>
    <li data-icon=".">Shopping Cart</li>
  </ul>
</body>
</html>

あなたはこれを見るはずです：

アイコンフォントの例

あなたは転がっています！

さらに、使用する文字を知るには、FontSquirrelサイトの文字コード表を確認してください。

于 2012-10-29T22:09:26.853 に答える