webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

font awesome

f:id:ohta-felica:20160612111317j:plain

  20160620修正

  • CDNサーバー上のfont-awesomeのファイルを利用する.
  • この場合、ローカルにダウンロードするファイルはない。
  • headに以下のように記述すればよい。
  • <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" >
  • 表示したいアイコンのコードを、表示したい場所に記述します。
  • コードはこんな感じです。<i class="fa fa-home" aria-hidden="true"></i>
  • ところで class="fa"とclass="fa-home" がどんなものか気になります。
  • fontswesomeのcssファイルにはいろいろなオプション用の記述がしてあるように見えます。

使い方のメモ

f:id:ohta-felica:20160612113519p:plain

 

  1. ダウンロードしたフアイルをフォルダごと全部、作業用フォルダにコピーする。
  2. そのcssファイルにリンクさせる。
  3. 使いたいフォントのページに有る、<i class="  ">font name</i>を使いたい場所にコピペする。
  4. 手軽です。

 

f:id:ohta-felica:20160612113929p:plain

f:id:ohta-felica:20160612114104p:plain

f:id:ohta-felica:20160612114959p:plain

<title>font-awesome-test</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>

<body>
<p><i class="fa fa-camera-retro fa-3x"></i>&nbsp; camera</p>
</body>
</html> 

f:id:ohta-felica:20160612114627p:plain