<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="green_bloom">
  <p>Написанное уведомление в рамке #1.</p>
</div>
<div class="yellow_relection">
  <p>Отправляя текстовое сообщение #2.</p>
</div>
<div class="red_panoramar">
  <p>Активация экрана при уведомлении #3.</p>
</div>
<div class="blue_display">
  <p>Политика конфиденциальности в Интернете #3.</p>
</div>

.green_bloom,
.yellow_relection,
.red_panoramar,
.blue_display {
  margin: 25px;
  padding: 10px 10px 10px 34px;
  color: #333;
  border-radius: 2px;
  background: #fff;
  position: relative;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  box-sizing: border-box;
}
.green_bloom:before,
.yellow_relection:before,
.red_panoramar:before,
.blue_display:before {
top: calc(50% - 25px);
  content: "";
  background: inherit;
  color: inherit;
  border: inherit;
  display: block;
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 48px;
  position: absolute;
  left: -25px;
  box-sizing: border-box;
  font-family: "FontAwesome";
  font-size: 22px;
}
.green_bloom {
  border: 2px solid #19932d;
  color: #167c27;
}
.green_bloom:before {
  content: "\f00c";
}
.yellow_relection {
  border: 2px solid #d16a16;
  color: #c76312;
}
.yellow_relection:before {
  content: "\f12a";
}
.red_panoramar {
border: 2px solid #d52621;
  color: #b32e2a;
}
.red_panoramar:before {
  content: "\f057";
}
.blue_display {
  border: 2px solid #1a79c7;
  color: #1e7bc7;
}
.blue_display:before {
  content: "\f129";
}