Question

是否可以在CSS中创建类似[此警报] [1]的代码？我在cPanel仪表板中看到了此警报。当我尝试查看该代码的Css时，也尝试将其重新切入登录页面。我做不到

Answer 1

就这么简单：

我添加了FontAwesome进行图标测试。您可以字体图标列表Here

在 .alert：content之前找到相关的图标代码，单击列表中的图标，然后复制 unicode 文本。

不要忘记在内容中的unicode前面加上反斜杠。

.alert {
    max-width: 550px;
    position:  relative;
    padding: 10px 20px 10px 10px;
    margin:  10px auto;
    border-radius: 3px;
    background-color: #faf8df;
    border: 2px solid #f5c340;
    border-left-width: 40px;
}
.alert:before {
    content: '\f071';
    font-family: "FontAwesome";
    position: absolute;
    left: -27px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}
.alert .close {
    position:  absolute;
    right: 8px;
    cursor:  pointer;
    top: 10px;
    color: #999;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="alert">
    <b>Warning:</b> this is the text you want to show as a warning message.
    <span class="close">&times;</span>
</div>

我们如何在新设计中创建CSS通知警报

1 个答案: