javascript - 使用半样式 CSS 的 Font Awesome

Question

我想知道是否有人可以帮助我/如果这可能的话。

我正在尝试对 youtube 字体超棒的图标进行一半样式(使用 halfstyle.js)，以便该图标就像 youtube Logo (下半部分红色，上半部分白色)

我想在悬停时执行此操作，但我什至似乎无法像默认情况那样执行此操作。

JSFiddle

body {
    background: rgba(0,0,0,.4);
}
.fa {
    font-size: 10em;
    color: white;
}
.fa-youtube {}

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the top part */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    height: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the bottom part */
    display:block;
    position:absolute;
    z-index:1;
    top:0;
    height: 100%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

<i class="fa fa-youtube textToHalfStyle"></i>

Answer 1

你不能为 FontAwesome i.fa 图标这样做，因为 HalfStyle 已经基于 ::after 和 ::before 伪元素。此外，FontAwesome 为此使用 :after。您需要创建另一个元素并提供 :hover 选项来实现此目的。

片段

$(function () {
  $(".textToHalfStyle").each(function () {
    $(this).parent().append('<div class="cloned"></div>');
    $(".cloned").append($(this).clone());
  });
});

body {
  background: rgba(0,0,0,.4);
  font-size: 160px;
}
.fa {
  color: #fff;
}
.cloned {
  opacity: 0;
  position: absolute;
  display: block;
  z-index: 1;
  left: 8px;
  top: 76px;
  height: 0.65em;
  overflow: hidden;
}
.cloned .fa {
  position: relative;
  top: -68px;
  color: #f00;
}
.fa:hover ~ .cloned,
.cloned:hover {
  opacity: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<i class="fa fa-youtube textToHalfStyle"></i>