Question

目前，唯一的方式是填补＆＃39; Font Awesome中的灯泡图标（我在这里处理版本4.x）是将填充颜色应用为背景。但是你最后会在图标周围出现一个丑陋的盒子。

不是最佳！（也很难看！）

我很好奇是否有人知道填充灯泡的方法 - 只是灯泡，而不是背景。而不是灯泡的轮廓线。我的想法是，我想显示不同颜色的灯泡，灯泡已经填满，因为轮廓颜色显然不那么明显。

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

Answer 1

这是一种方法：

class A {
   private String name;
}

Class B extends A {
   private String domain;
}

getFields(ctClass).forEach(f -> {
    final AnnotationsAttribute attr = new AnnotationsAttribute(cpool, AnnotationsAttribute.visibleTag);
    final Annotation annot = new Annotation(Indexed.class.getName(), cpool);
    attr.addAnnotation(annot);
    f.getFieldInfo().addAttribute(attr);
});

List<CtField> getFields(CtClass ctClass) throws NotFoundException {
    final List<CtField> fields = new LinkedList<CtField>();
    fields.addAll(Arrays.asList(ctClass.getDeclaredFields()));
    while (ctClass.getSuperclass() != null) {
        ctClass = ctClass.getSuperclass();
        fields.addAll(Arrays.asList(ctClass.getDeclaredFields()));
    }
    return fields;
}

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

...和<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> » <i class="fa fa-lightbulb-o"></i> «，以防您想要更改颜色。记住它需要在<svg>跨浏览器中使用base64编码。

url()

如何：填写字体真棒4.x灯泡

1 个答案: