Font-Awesome 体验 鼠标进入图标变大 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link href="Font-Awesome-3.2.1/Font-Awesome-3.2.1/css/font-awesome.min.css" rel="stylesheet" />
  <style>
    .the-icons li:hover {
      background-color: #fbf4f4;
    }

      .the-icons li:hover [class^="icon-"], .the-icons li:hover [class*=" icon-"] {
        *font-size: 28px;
        *vertical-align: middle;
      }

        .the-icons li:hover [class^="icon-"]:before, .the-icons li:hover [class*=" icon-"]:before {
          font-size: 28px;
          vertical-align: -5px;
        }

    .the-icons li {
      cursor: pointer;
      line-height: 32px;
      height: 32px;
      padding-left: 12px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <ul class="the-icons">
      <li><i class="icon-download-alt"></i>icon-download-alt</li>
    </ul>
  </form>
</body>
</html>


没有本页内连样式 默认就是 鼠标经过 图标无变化的。  这段 css  代码 还是从 官网 找到，copy过来的。

posted @ 2015-01-10 08:49  pengbg  阅读(554)  评论(0)  编辑  收藏  举报