Font Awesome 的半样式 CSS。

Question

我想知道是否有人能帮助我 / 是否可能实现。

我正在尝试半样式（使用halfstyle.js）Youtube的font-awesome图标，使图标像Youtube标志一样（底部一半为红色，顶部一半为白色）

我想在悬停时这样做，但是我甚至无法将其设置为默认状态。

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>

- Tom

---

找类似于这个的东西吗？ - vivekkupadhyay

@vivekkupadhyay 不，我只是希望“管子框”变成红色，其他保持不变。 - Tom

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>

- Praveen Kumar Purushothaman

---

我希望图标是白色的，然后在悬停时显示为您所拥有的样式（顶部没有红色）。 - Tom

@Tom 需要一些时间来弄清楚。:P - Praveen Kumar Purushothaman

非常感谢您！！ - Tom