<body>
<div class="notify warning fa-exclamation-circle">
  Пожалуйста, заполните все поля паролей.
</div><br/><br/>
  <div class="notify warning fa-exclamation-circle light">
  Пожалуйста, заполните все поля паролей.
</div><br/><br/>
  <div class="notify warning fa-exclamation-square">
  Пожалуйста, заполните все поля паролей.
</div>
  <br/><br/>
    <div class="notify warning fa-exclamation-square light">
  Пожалуйста, заполните все поля паролей.
</div>
  <br/><br/>
  <div class="notify warning fa-exclamation-triangle">
  Пожалуйста, заполните все поля паролей.
</div>
    <br/><br/>
  <div class="notify warning fa-exclamation-triangle light">
  Пожалуйста, заполните все поля паролей.
</div>
</body>
.notify{    
    min-height: 30px;
    display: inline-block;
    line-height: 30px;
    padding: 0 15px 0 5px;
    color: white;
    text-transform: uppercase;
    font-family: monospace;
    font-weight: 700;
    border: none;
    border-left: 2px transparent solid;
}
.warning{    
    background: #ff2c2c;
    border-color: red;
}
.notify:before{
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    box-sizing: border-box;
    color:white;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}
.notify.light:before{
  font-weight: 500;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.