Question

我想使用字体真棒图标并根据点击显示/隐藏它们。但它不起作用。我无法更改carret awesomefont图标的显示，实际的消息显示并隐藏得很好。检查笔，你会更好地理解我想要的东西。

HTML代码

<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle">  
  <div id = "wrapper1">
    <i class="fa fa-caret-down"></i>
  </div>  
  <div id = "wrapper2">
    <i class="fa fa-caret-up"></i>
  </div>
</label>

CSS

#wrapper1{
  background-color:black;
}
#wrapper2{
  background-color:red;
  display:none;
}
* {
  margin:0;
  padding:0;
  font-family:"Helvetica Neue", Helvetica, Sans-serif;
  word-spacing:-2px;
}

h1 {
  font-size:40px;
  font-weight:bold;
  color:#191919;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight:normal;
  font-size:20px;
  color:#888;
  padding:5px 0;
}

.message {
background:#181818;
color:#FFF;
position: absolute;
top: -250px;
left: 0;
width: 100%;
height: 250px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;

}

.message h1 {
  color:#FFF;
}

#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease;
}
#toggle + label:after {
  content:"Open" 
}

.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .container {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"
}

#toggle:checked + #wrapper1:after {
  display:none;
}

#toggle:checked ~ #wrapper1 {
  display:none;
}

#toggle:checked + #wrapper2:after {
  display:inline-block;
}

#toggle:checked ~ #wrapper2 {
  display:inline-block;
}

Answer 1

我找到了使用Using this Thread的解决方案。使用unicode，内容并将class="fa"添加到相关元素中。笔已被修改

单击使用Font Awesome单击显示/隐藏内容PURE CSS3

1 个答案: