码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-01-10 10:00:26      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:

<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过来的。

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

标签:

原文地址:http://www.cnblogs.com/bingguang/p/4214483.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!