如何在新设计中创建CSS通知警报
如何在新设计中创建CSS通知警报
提问于 2018-07-03 01:42:55
可以在CSS中创建这样的警报吗？我在我的cPanel仪表板中看到了此警报。在那里，我还试图查看该代码的Css，当我试图查看它返回到登录页面。我做不到。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-03 03:18:15
就像这样简单：
我已经为图标测试添加了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">×</span>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51141256
复制相关文章
相似问题