如何画按钮

Question

如何在按钮内绘制形状？我想在按钮内画一个加号。

.button{
  background-color: #423C3B;
  padding: 32px 32px;
  border-radius: 8px;
}

这是我的按钮代码。

由于

Answer 1

对于“绘制”简单，流行的形状，你可以使用为符号制作的字体，比如font-awesome。请查看此jsfiddle以获取示例：

https://jsfiddle.net/gc4z9o9n/

<button class="btn">
  <i class="fa fa-plus" aria-hidden="true"></i>
</button>

Answer 2

如果您仅需要加号，则图标字体可能过度，需要额外的文件和请求。您可以使用+或+作为几何体。

＆＃13;

＆＃13;

button {
  padding: 0.5rem 1rem;
  color: whitesmoke;
  font-size: 3rem;
  background-color: #423C3B;
  border-radius: 8px;
}

＆＃13;

<button type="button">&plus;</button>

＆＃13;

＆＃13;

＆＃13;

根据需要调整padding，font-size等。

如果你真的喜欢图标字体的样式，那么我建议使用IcoMoon App之类的东西来选择只需要你需要的图标来保持足迹的最小化。