首页 > 代码库 > Font-Awesome 体验 鼠标进入图标变大

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=http://www.mamicode.com/"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 体验 鼠标进入图标变大