不是第一

fontawesome 地址open in new window

使用 CSS

  1. 复制 font-awesome 目录到你的项目中
  2. 在<head>处加载font-awesome.min.css如下。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

  1. 你可以通过设置CSS前缀 fa 和图标的具体名称，来把Font Awesome 图标放在任意位置。Font Awesome 被设计为用于行内元素（我们喜欢用更简短的<i>标签，它的语义更加精准）。

<i class="fa fa-camera-retro"></i> fa-camera-retro 例如: 默认图标如果您修改了图标容器的字体大小，图标大小会随之改变。同样也适用于颜色，阴影，阴影等其它任何CSS支持的效果上。

  • 为了增加图标大小相对于它们的容器, 使用 fa-lg (33% 递增), fa-2x, fa-3x, fa-4x, 或 fa-5x classes.
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
  • 使用 fa-fw 来设置图标在一个固定宽度内，主要用于不同宽度图标无法对齐的情况，尤其在列表或导航时起到重要作用。
<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; 首页</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; 关于我们</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; 后台应用编辑</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; 系统设置</a>
</div>
  • 使用 fa-ul and fa-li 轻松的替换无序列表中的默认图标。
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>使用列表类图标</li>
  <li><i class="fa-li fa fa-check-square"></i>轻松的替换</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>无序列表</li>
  <li><i class="fa-li fa fa-square"></i>中的默认图标</li>
</ul>
  • 星级评级是每个人都曾尝试过的经典用户体验模式之一。我有一个想法，用很少的代码和没有JavaScript完成UX部分。
<style>
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}
</style>

<body>
    <div class="rating">
        <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
    </div>
</body>