読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

Font Awesome の使い方

Font Awesome

  • フォントアイコン
ライブラリを入手
  • トップページの「Download」というリンクをクリックする


http://fortawesome.github.io/Font-Awesome/


必要なファイルを設置する


スタイルシートの読み込み
<link rel="stylesheet" href="css/font-awesome.css">
フォントアイコンの表示
  • class名を調べて記述する


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Font Awesome の使用例</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.css">
</head>
<body>
<nav class="globalNav">
<ul class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</ul>
</nav>
</body>
</html>
@charset "UTF-8";

html, body, nav, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

.globalNav {
  width: 200px;
  margin: 50px auto;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #FFF;
  border: 1px solid #DDD;
}
a.list-group-item {
  color: #555;
}
a.list-group-item:hover {
  color: #000;
  background-color: #DDD;
}