目前,唯一的方式是填补' Font Awesome中的灯泡图标(我在这里处理版本4.x)是将填充颜色应用为背景。但是你最后会在图标周围出现一个丑陋的盒子。
不是最佳! (也很难看!)
我很好奇是否有人知道填充灯泡的方法 - 只是灯泡,而不是背景。而不是灯泡的轮廓线。我的想法是,我想显示不同颜色的灯泡,灯泡已经填满,因为轮廓颜色显然不那么明显。
答案 0 :(得分:2)
这是一种方法:
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;
}
这是打开/关闭它的方法:
.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()