将图标添加到边框按钮

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 Example

Answer 1

使用带有所需颜色边框的伪元素（::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>

Answer 2

Unicode字符

尝试使用unicode字体字符，我通过用关键字 circle: here. 搜索找到了3种合适的字符。对于每种字体，有几种使用字体字符的协议，但有2种我们将关注以下方面：

---

CSS

根据Ori Drori's answer，将CSS模式用作伪元素中的内容值：

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

---

HTML

使用HTML实体要容易得多，但这取决于将unicode放入标记中，而这样做大规模且繁琐且难以维护。

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>