content 特殊符号和设计图标

如何设计图标?

效果图: 就是一个圆圈里面带个叉叉

css代码

.cross{
    width: 20px;
    height: 20px;
    background-color: #F3F9FF;
    border-radius: 10px;
    border: 1px solid #DBE6EF;
    display: inline-block;
    position: relative;
    bottom: 20px;
    right: 15px;
}
.cross:after{
    content: "\2715";//特殊字符或形状
    color: #a2b6c5;
    font-size: 12px;
    position: relative;
    left: 4px;
    bottom: 3px;
    cursor: pointer;
}

解决——CSS :before、:after , 当content使用中文时有时候会出现乱码

解决方案：

确保HTML、CSS文件使用UTF-8格式, 并且HTML文档也使用UFT-8的字符编码格式, 即HTML文档的meta信息包含 。

避免在CSS的:before, :after中使用中文, 如果一定要使用, 可以使用中文对应的Unicode。

可以使用使用的Unicode编码转换, 或者是JavaScript的原生方法escape将中文转为Unicode。

需要注意的是Unicode在CSS中的书写方式, 例如"限量抢"对应的Unicode是'\u9650\u91cf\u62a2', 而在CSS中要写成 span:before { content: '\9650\91cf\62a2' }, 需要去掉字母"u"

css样式文件:

@charset UTF-8