字体Awesome与半样式CSS

Font Awesome with Half Style CSS

本文关键字：样式 CSS Awesome 字体      更新时间：2023-09-26

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

我正在尝试半风格(使用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>

您不能为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>

相关文章：