如何制作添加按钮

Question

我想添加一个这样的按钮：

我尝试的是以下代码：

<ActionBar>
  <ButtonGroup>
    <Button type="action fa fa-plus"> Add New </Button>
  </ButtonGroup>
</ActionBar>

但结果看起来并不像我想要的，就像在下图中一样。任何想法如何解决这个问题？

我看到按钮中的文字不同，这并不重要。

Answer 1

请查看以下内容。

＆＃13;

＆＃13;

button[type=action]:before {
  font-family: fontAwesome;
  content: "\f067";
  font-size: 0.8em;
}

button[type=action] {
  background-color: white;
  border: thin solid darkgray;
  font-size: 0.8em;
  border-radius: 3px;
  padding: 5px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ActionBar>
  <ButtonGroup>
    <Button type="action"> Add New </Button>
  </ButtonGroup>
</ActionBar>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我对您的示例代码做了一些小改动。加载 Bootstrap 和 Font Awesome

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<ActionBar>
  <ButtonGroup>
    <Button class="btn btn-default" type="action fa fa-plus"><i class="fa fa-plus"></i> Add New </Button>
    <Button class="btn btn-default" type="action"><i class="fa fa-search"></i> Search </Button>
  </ButtonGroup>
</ActionBar>

Answer 3

添加font-awesome.css，它将为您创造奇迹。使用font-awesome检查以下代码，并为您提供加号图标添加按钮。

button[type=action]:before {
  font-family: fontAwesome;
  content: "\f067";
}

button[type=action] {
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ActionBar>
  <ButtonGroup>
    <Button type="action"> Add New </Button>
  </ButtonGroup>
</ActionBar>

Answer 4

button{
background-color:white;
border-color:lightgrey;
border-style:solid;
border-width:1px;
padding:5px;
border-radius:3px;
}

<ActionBar>
  <ButtonGroup>
    <Button type="action fa fa-plus"> &#10010; Add New </Button>
  </ButtonGroup>
</ActionBar>