Javascript 将图标添加到正确/不正确的答案（ionic中的css）

我现在正在制作一个测验应用程序并编辑我的选项。这是我对正确/错误选项的css

.correct {
    background-color:#48D76E;
    color: black;
    padding:0;
    margin:0 0 .5rem 0;
    padding:.6875rem;
    font-size:.875rem;
}

.wrong {
    background-color:#EF473A;
    color: black;
    padding:0;
    margin:0 0 .5rem 0;
    padding:.6875rem;
    font-size:.875rem;
}

是否可以显示图标（正确答案打勾，错误答案打叉）

这就是现在的样子。如果选择了正确的答案，我希望它显示一个勾号，如果选择了错误的项目，则显示一个叉号。我正在使用ionic框架构建这个应用程序。有人能就这件事向我提出建议吗？我想使用这些图标

你可以使用字体来制作图标，它们有很多图标，还可以使用CSS，这样你就可以把它们变大或变小

这是他们的网站，从那里，您可以查看他们的所有图标，看看您喜欢哪些图标，但我们需要，因此我将给出一个示例代码，向您展示我的意思：

字体真棒演示

这可能会对您有所帮助

通过单击Fiddle中的正确和错误按钮进行检查

使用以下代码

<script type="text/javascript">
   function right() {
     document.getElementsByClassName('result-right')[0].classList.add('correct');
     document.getElementsByClassName('result-wrong')[0].classList.remove('wrong');
     document.querySelectorAll('.result-right span')[0].classList.add('ion-checkmark-circled');
     document.querySelectorAll('.result-wrong span')[0].classList.remove('ion-close-circled');
   }

   function wrong() {
     document.getElementsByClassName('result-wrong')[0].classList.add('wrong');
     document.getElementsByClassName('result-right')[0].classList.remove('correct');
     document.querySelectorAll('.result-wrong span')[0].classList.add('ion-close-circled');
     document.querySelectorAll('.result-right span')[0].classList.remove('ion-checkmark-circled');
   }

</script>
<div class="result-right">
  A) TRUE <span class=""></span>
</div>
<div class="result-wrong">
  B) FALSE <span class=""></span>
</div>
<button class="button ans-right" onclick="right()">
  Right
</button>
<button class="button ans-wrong" onclick="wrong()">
  Wrong
</button>

功能权限（）{
document.getElementsByClassName（'result-right'）[0].classList.add（'correct'）；
document.getElementsByClassName（'result-error'）[0].classList.remove（'error'）；
document.querySelectorAll（'.result right span'）[0].classList.add（'ion-checkmark-circled'）；
document.querySelectorAll（'.result错误span'）[0].classList.remove（'ion-close-circled'）；
}
函数错误（）{
document.getElementsByClassName（'result-error'）[0].classList.add（'error'）；
document.getElementsByClassName（'result-right'）[0].classList.remove（'correct'）；
document.querySelectorAll（'.result错误span'）[0].classList.add（'ion-close-circled'）；
document.querySelectorAll（'.result right span'）[0].classList.remove（'ion-checkmark-circled'）；
}
A） 真的
B） 假的
赖特
错

是的，这是很有可能的，但到目前为止您尝试了什么？你知道如何使用图标吗？如果没有，我建议您先阅读文档并学习如何使用它们，然后再尝试将它们应用到现有项目中。@NewToJS我尝试添加分割但没有成功，我还尝试在css中添加before类，也没有成功。你能总结一下我需要做什么吗？如果你想让ionicon显示在答案的右边，我会在答案里面动态创建一个div，将style属性设置为float right，并应用该答案所需的icon类。或者答案中有一个空的span/div，只要在验证/确认后应用一个类即可检查答案。谢谢，这让我走上了正确的轨道。如果您在尝试后遇到问题，欢迎返回并解释您遇到的问题。祝你发展顺利。