Question

所以我有一个小的“介绍”框，我设计了使用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

通过浏览器将数字视为图标

0 个答案: