所以我有一个小的“介绍”框,我设计了使用fontawesome图标的效果。效果很好,我想保留它,但是在页面后面我有一个“统计”框,我想使用相同的风格和放大器。效果,但使用正常数字,以便数字可以通过PHP脚本动态更改。当然,每当我使用普通数字时效果都不起作用,因为我设计了CSS以使用fontawesome图标。有没有办法让文本解析为图标,还是我需要重写我的CSS?
HTML
<!-- Statistics -->
<div class="row">
<div class="span12 centre">
<h2 class="b-title">Some Statistics</h2><br /><br />
<!--Section 1-->
<div class="stats-box stats-box1">
<div class="text-center block-box">
<div class="stats-effect-inner"> <a class="stats-effect icon-unlock icon-3x" href="#"></a> </div>
<h3 style="text-decoration: none;">Domains</h3>
<p>The number of free domains given.</p>
<br />
</div>
</div>
</div>
相对CSS就在这里。完整样式CSS位于fiddle。
/*------------ Hover Effect Stats ------- */
.stats-effect { display: inline-block; font-size: 0px; cursor: pointer; margin: 15px 30px; width: 90px; height: 90px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; text-align: center; position: relative; z-index: 1; color: #fff; }
.stats-effect:after { pointer-events: none; position: absolute; width: 100%; height: 100%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.stats-effect:before { speak: none; font-size: 48px; line-height: 90px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; }
/* Effect 1 */
.stats-effect-inner .stats-effect { background: rgba(255, 255, 255, 0.1); -webkit-transition: background 0.2s, color 0.2s; -moz-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; }
.stats-effect-inner .stats-effect:after { top: -7px; left: -7px; padding: 7px; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -webkit-transform: scale(.8); -moz-transition: -moz-transform 0.2s, opacity 0.2s; -moz-transform: scale(.8); -ms-transform: scale(.8); transition: transform 0.2s, opacity 0.2s; transform: scale(.8); opacity: 0; -moz-box-shadow: 0 0 0 4px #ffffff;/*FF 3.5+*/ -webkit-box-shadow: 0 0 0 4px #ffffff;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color=#ffffff)";/*IE 8*/ box-shadow: 0 0 0 4px #ffffff; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color=#ffffff);/*IE 5.5-7*/
}
/* Effect */
.stats-box1:hover .stats-effect-inner .stats-effect, .stats-box2:hover .stats-effect-inner .stats-effect, .stats-box3:hover .stats-effect-inner .stats-effect { background: rgba(255, 255, 255, 1); color: #27CCC0; }
.stats-box1:hover .stats-effect-inner .stats-effect:after, .stats-box2:hover .stats-effect-inner .stats-effect:after, .stats-box3:hover .stats-effect-inner .stats-effect:after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }
/*------------ Icon Hover Effect ------- */
.stats-effect1 > img { padding: 20px; }
.stats-effect-inner1 { position: absolute; right: -33px; top: -33px; }
.stats-effect1 { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; color: #FF6850; cursor: pointer; display: inline-block; font-size: 0; height: 70px; margin: 12px 21px 15px 11px; position: relative; text-align: center; width: 70px; z-index: 1; }
.stats-effect1:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; content: ""; height: 100%; pointer-events: none; position: absolute; width: 100%; }
.stats-effect1:before { background: none repeat scroll 0 0 #FAFAFA; border-radius: 50% 50% 50% 50%; display: block; font-size: 48px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 90px; text-transform: none; }
.stats-effect-inner1 .stats-effect { background: none repeat scroll 0 0 rgba(13, 30, 219, 0.1); transition: background 0.2s ease 0s, color 0.2s ease 0s; }
TL; DR - 我希望框内圆圈内的图标为普通文本编号,但在鼠标悬停时效果相同。
非常感谢你的帮助!
编辑:更新的好词:Fiddle
编辑:最小化CSS:Fiddle