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