Добавить значок к кнопке границы

Question

Я хотел бы помочь представить это изображение с помощью CSS.Я не знаю, как поставить этот маленький оранжевый шарик на левый край кнопки.

.btn-typesTitleCreator {
    box-shadow: 0 2px 21px 0 rgba(255,114,1,0.51) !important;
    border: 1px solid #FF7201;
    height: 70px;
    border-radius: 12px;
}

<button type="button" class="btn-typesTitleCreator" id="createSmartTitle_button">Criar título inteligente</button>

IMG Пример

Answer 1

Символы Unicode

Попробуйте использовать символ шрифта Unicode, я нашел 3 подходящих, выполнив поиск по ключевому слову кружок: здесь. .Для каждого шрифта есть несколько протоколов для использования символа шрифта, но есть два, с которыми мы столкнемся:

---

CSS

Использование шаблона CSS в качестве значения содержимого в псевдоэлементесогласно ответу Ори Дрори :

 button.css::before {  // ::before` is a pseudo-element<br>
    content: '\1f787'; //  content` is the CSS unicode
        ....
   }

---

HTML

Использование сущностей HTML намного проще в использовании, но это зависит отразмещение юникода в разметке, которая выполняется в больших масштабах, было бы утомительно и трудно поддерживать.

button.html b { 
   ... 
  }
  <button><b>&#128903;</b></button>

---

Демо

html,
body {
  font: 400 16px/1.5 Cosolas
}

#display {
  width: 95%;
  border-collapse: collapse;
  padding: 15px;
}

th,
td {
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

button.btn {
  box-shadow: 0 2px 21px 0 rgba(255, 114, 1, 0.51) !important;
  border: 1px solid #FF7201;
  height: 70px;
  width: 200px;
  line-height: 2;
  border-radius: 12px;
  display: table;
  margin: 10px;
  font: 700 16px/2 Verdana;
  position: relative;
}

button.css::before {
  content: '\1f787';
  font-size: 2rem;
  display: inline-table;
  position: absolute;
  left: -8%;
  top: 8%;
  color: rgba(255, 144, 0, 1);
}

button.html b {
  font-size: 2rem;
  display: inline-table;
  position: absolute;
  left: -8%;
  top: 8%;
  color: rgba(255, 144, 0, 1);
}

<table id='display'>
  <tbody>
    <tr>
      <th>Raw</th>

      <td>⭕</td>
      <td>?</td>
      <td>⦾</td>
    </tr>
    <tr>
      <th>HTML</th>
      <td><code>&amp;#11093;</code></td>
      <td><code>&amp;#128903;</code></td>
      <td><code>&amp;#10686;</code></td>
    </tr>
    <tr>
      <th>CSS</th>
      <td><code>\2b55</code></td>
      <td><code>\1f787</code></td>
      <td><code>\29be</code></td>
    </tr>
  </tbody>
</table>

<button class='btn css' type='button'>CSS Button</button><br>

<button class='btn html' type='button'>
<b>&#128903; </b>HTML Button</button>

Answer 2

Используйте псевдоэлемент (::before) с рамкой нужного цвета и border-radius: 50%, чтобы сделать его округлым:

.btn-typesTitleCreator {
  position: relative;
  box-shadow: 0 2px 21px 0 rgba(255, 114, 1, 0.51);
  border: 1px solid #FF7201;
  height: 70px;
  border-radius: 12px;
  padding: 0 1em;
  margin: 1em;
}

.btn-typesTitleCreator::before {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 0;
  top: 50%;
  height: 10px;
  width: 10px;
  border: 5px solid #FF7201;
  border-radius: 50%;
  background: white;
  content: '';
}

<button type="button" class="btn-typesTitleCreator" id="createSmartTitle_button">
    Criar título inteligente
  </button>