ブートストラップフォントアイコンを参照する方法

藏色散人

リリース： 2020-11-30 15:41:52

オリジナル

4125 人が閲覧しました

ブートストラップフォントアイコンを参照する方法: 最初にフォントフォルダーを作成し、それを js および css ファイルと同じディレクトリに配置し、最後に「src: url('font/glyphicons-halflings-normal.eot)」を渡します。 ');" を使用してフォントアイコンを参照できます。

ブートストラップフォントアイコンを参照する方法

このチュートリアルの動作環境: Windows 7 システム、ブートストラップバージョン 3。この方法は、すべてのブランドのコンピューターに適しています。

推奨: 「bootstrap チュートリアル」

Bootstrap はフォントアイコンを正しく引用します:

補足:

実は以下のような手間は必要なく、fontsフォルダを作成してjsやcssファイルと同じディレクトリに置くだけで正しく参照できるようになります。ファイルが存在する必要があります:

最初のタイプ (フォントファイルのパスは柔軟に変更してください)

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('font/glyphicons-halflings-regular.eot');
            src: url('font/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('font/glyphicons-halflings-regular.woff') format('woff'), url('font/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
        }

ログイン後にコピー

2 番目のタイプ

<!--<style type="text/css">
            @font-face {
    font-family: 'Glyphicons Halflings';
    src: url('font/glyphicons-halflings-regular.eot');
    src: url('font/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
          url('font/glyphicons-halflings-regular.woff') format('woff'), 
          url('font/glyphicons-halflings-regular.ttf') format('truetype'),
          url('font/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
   }

ログイン後にコピー

注: フォントアイコンのサイズを調整するには、font-size 属性を使用します。歪むことはありません。

プログラミング関連の知識について詳しくは、プログラミング学習をご覧ください。！

以上がブートストラップフォントアイコンを参照する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。