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