css - 如何 : Fill the Font Awesome 4. x 灯泡

Question

目前，从 Font Awesome(我这里只处理 4.x 版)“填充”灯泡图标的唯一方法是将填充颜色应用为背景。但是你最终会在图标周围看到一个丑陋的方框。

不是最理想的! (也很丑!)

我很好奇是否有人知道填充灯泡的方法 - 只填充灯泡，而不是背景。而不是灯泡的轮廓线。我的想法是，我想显示不同颜色的灯泡，其中填充了灯泡，因为轮廓颜色确实不太明显。

有问题的灯泡图标: https://fontawesome.com/v4.7.0/icon/lightbulb-o/

Answer 1

这里有一个方法:

.fa-lightbulb-o {
  position: relative;
}

.fa-lightbulb-o:after {
  content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0nMS4xJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB4PScwcHgnIHk9JzBweCcgdmlld0JveD0nMCAwIDE3OTIgMTc5Micgc3R5bGU9J2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc5MiAxNzkyOycgeG1sOnNwYWNlPSdwcmVzZXJ2ZSc+PHBhdGggZmlsbD0neWVsbG93JyBkPSdNMTE4MS41LDc5Mi4zYzEzLjctMTQuNywyMy44LTI1LjcsMzAuNS0zM2M0NS4zLTUyLjcsNjgtMTEyLjcsNjgtMTgwYzAtNDgtMTEuNS05Mi43LTM0LjUtMTM0Yy0yMy00MS4zLTUzLTc1LjItOTAtMTAxLjVjLTM3LTI2LjMtNzgtNDctMTIzLTYyYy00NS0xNS05MC41LTIyLjUtMTM2LjUtMjIuNXMtOTEuNSw3LjUtMTM2LjUsMjIuNXMtODYsMzUuNy0xMjMsNjJjLTM3LDI2LjMtNjcsNjAuMi05MCwxMDEuNWMtMjMsNDEuMy0zNC41LDg2LTM0LjUsMTM0YzAsNjcuMywyMi43LDEyNy4zLDY4LDE4MGM2LjcsNy4zLDE2LjgsMTguMywzMC41LDMzczIzLjgsMjUuNywzMC41LDMzYzg1LjMsMTAyLDEzMi4zLDIwMS4zLDE0MSwyOThoMjI4YzguNy05Ni43LDU1LjctMTk2LDE0MS0yOThDMTE1Ny43LDgxNy45LDExNjcuOCw4MDYuOSwxMTgxLjUsNzkyLjN6Jy8+PC9zdmc+');
  position: absolute;
  top: 0;
  left: -.214em;
  margin: 0 auto;
  z-index: -1;
  display: block;
  width: 1em;
}

这是打开/关闭它的方法:

var el = document.querySelector('.fa-lightbulb-o');
el.onclick = function() {
  el.classList.toggle('lit');
}

.fa-lightbulb-o {
  position: relative;
}

.fa-lightbulb-o:after {
  content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0nMS4xJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB4PScwcHgnIHk9JzBweCcgdmlld0JveD0nMCAwIDE3OTIgMTc5Micgc3R5bGU9J2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc5MiAxNzkyOycgeG1sOnNwYWNlPSdwcmVzZXJ2ZSc+PHBhdGggZmlsbD0neWVsbG93JyBkPSdNMTE4MS41LDc5Mi4zYzEzLjctMTQuNywyMy44LTI1LjcsMzAuNS0zM2M0NS4zLTUyLjcsNjgtMTEyLjcsNjgtMTgwYzAtNDgtMTEuNS05Mi43LTM0LjUtMTM0Yy0yMy00MS4zLTUzLTc1LjItOTAtMTAxLjVjLTM3LTI2LjMtNzgtNDctMTIzLTYyYy00NS0xNS05MC41LTIyLjUtMTM2LjUtMjIuNXMtOTEuNSw3LjUtMTM2LjUsMjIuNXMtODYsMzUuNy0xMjMsNjJjLTM3LDI2LjMtNjcsNjAuMi05MCwxMDEuNWMtMjMsNDEuMy0zNC41LDg2LTM0LjUsMTM0YzAsNjcuMywyMi43LDEyNy4zLDY4LDE4MGM2LjcsNy4zLDE2LjgsMTguMywzMC41LDMzczIzLjgsMjUuNywzMC41LDMzYzg1LjMsMTAyLDEzMi4zLDIwMS4zLDE0MSwyOThoMjI4YzguNy05Ni43LDU1LjctMTk2LDE0MS0yOThDMTE1Ny43LDgxNy45LDExNjcuOCw4MDYuOSwxMTgxLjUsNzkyLjN6Jy8+PC9zdmc+');
  position: absolute;
  top: 0;
  left: -.214em;
  margin: 0 auto;
  z-index: -1;
  display: block;
  width: 1em;
}

i.fa-lightbulb-o {
  cursor: pointer;
  margin: 0 2rem;
  display: flex;
}

.fa-lightbulb-o:after {
  opacity: 0;
  transition: opacity .42s cubic-bezier(.4, 0, .2, 1);
}

.fa-lightbulb-o:after,
.fa-lightbulb-o:before {
  font-size: 10rem;
}

.lit:after {
  opacity: 1;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 8px);
  margin: 0;
  font-size: 7em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> &#187; <i class="fa fa-lightbulb-o"></i> &#171;

... 和 <svg> , 如果你想改变颜色。记住它需要在 url() 中使用 base64 编码跨浏览器。

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1792 1792' style='enable-background:new 0 0 1792 1792;' xml:space='preserve'>
    <path fill='yellow' d='M1181.5,792.3c13.7-14.7,23.8-25.7,30.5-33c45.3-52.7,68-112.7,68-180c0-48-11.5-92.7-34.5-134c-23-41.3-53-75.2-90-101.5c-37-26.3-78-47-123-62c-45-15-90.5-22.5-136.5-22.5s-91.5,7.5-136.5,22.5s-86,35.7-123,62c-37,26.3-67,60.2-90,101.5c-23,41.3-34.5,86-34.5,134c0,67.3,22.7,127.3,68,180c6.7,7.3,16.8,18.3,30.5,33s23.8,25.7,30.5,33c85.3,102,132.3,201.3,141,298h228c8.7-96.7,55.7-196,141-298C1157.7,817.9,1167.8,806.9,1181.5,792.3z'/>
</svg>