Wie ein Add-Taste

-1

machen Ich möchte eine Schaltfläche wie folgt hinzuzufügen:Wie ein Add-Taste

Was ich habe versucht, ist der folgende Code:

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

Aber das Ergebnis sieht nicht so aus, wie ich es möchte, es ist wie in der folgenden Abbildung. Irgendwelche Ideen, wie man das löst?

Ich sah, dass der Text in die Tasten unterschiedlich ist, das ist nicht wichtig.

Quelle

2017-06-12 Samurai Jack

New –

Font-awesome gibt Ihnen nur Bilder hinter dem Text, aber nicht die Grenze – FieryCat

Ich würde vorschlagen, dass Sie den IMG zu Ihrer Schaltfläche hinzufügen –

Ich habe einige kleine Änderungen an Ihrem Beispielcode vorgenommen. Geladen Bootstrap und Font Ehrfürchtig

<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>

Quelle

2017-06-12 09:00:04 DDan

Bitte unten überprüfen.

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; 
 
}

<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>

Quelle

2017-06-12 09:00:41 Gerard

Fügen Sie die font-awesome.css und es wird für Sie Wunder. Überprüfen Sie den folgenden Code mit font-awesome und geben Sie den Plus-Button zum Hinzufügen von Symbolen.

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>

Quelle

2017-06-12 09:03:39

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>

Quelle

2017-06-12 10:15:03

Wie ein Add-Taste

Antwort

Verwandte Themen