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

Question

是否可以在 CSS 中创建类似 [this alert][1] 的东西？我在我的 cPanel 仪表板中看到了这个警报。当我尝试查看它时，我还尝试查看该代码的 Css 重新切换到登录页面。我做不到。

Answer 1

就这么简单:

我已经为图标测试添加了 FontAwesome。你可以字体图标列表Here

要查找.alert:before 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>