Skip to content

Commit b93df72

Browse files
committed
Add icon to buttons
1 parent 053f445 commit b93df72

File tree

2 files changed

+17
-6
lines changed

2 files changed

+17
-6
lines changed

dev/app.vue

+11-2
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,16 @@
66
.row(v-show="model")
77
.col-md-6
88
.buttons.text-center
9-
button.btn.btn-default.new(@click="newModel") New
9+
button.btn.btn-default.new(@click="newModel")
10+
i.fa.fa-plus
11+
| New
1012
button.btn.btn-primary.save(@click="saveModel")
13+
i.fa.fa-floppy-o
1114
| Save
1215
i.fa.fa-warning(v-if="showWarning()")
13-
button.btn.btn-danger.delete(@click="deleteModel") Delete
16+
button.btn.btn-danger.delete(@click="deleteModel")
17+
i.fa.fa-trash
18+
| Delete
1419

1520
.errors.text-center
1621
div.alert.alert-danger(v-for="item in validationErrors") {{ item.field.label}}:
@@ -210,6 +215,10 @@
210215
margin: 0.2em 0.3em;
211216
padding: 6px 20px;
212217
position: relative;
218+
219+
i {
220+
margin-right: 0.3em;
221+
}
213222
}
214223
215224
i.fa.fa-warning {

src/fields/fieldImage.vue

+6-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
input.form-control.link(type="text", v-model="wrappedValue", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
44
input.form-control.file(type="file", :readonly="schema.readonly", :disabled="disabled", v-if="schema.browse !== false", @change="fileChanged")
55
.preview(:style="previewStyle")
6-
.remove(title="Remove image", @click="remove")
6+
.remove.fa.fa-trash-o(title="Remove image", @click="remove")
77
</template>
88

99
<script>
@@ -83,13 +83,15 @@
8383
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
8484
8585
.remove {
86-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAXUlEQVR42u2SwQoAIAhD88vVLy8KBlaS0i1oJwP3piGVg0Skmpq8HjqZrWl9uwCbGAmwKYGZs/6iqgMyAdJuM8W2QmYKpLt/0AG9ASCv/oAnANd3AEjmAlFT1BypAV+PnRH5YehvAAAAAElFTkSuQmCC');
86+
/*background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAXUlEQVR42u2SwQoAIAhD88vVLy8KBlaS0i1oJwP3piGVg0Skmpq8HjqZrWl9uwCbGAmwKYGZs/6iqgMyAdJuM8W2QmYKpLt/0AG9ASCv/oAnANd3AEjmAlFT1BypAV+PnRH5YehvAAAAAElFTkSuQmCC');
8787
width: 16px;
8888
height: 16px;
89+
*/
90+
font-size: 1.2em;
8991
9092
position: absolute;
91-
right: 2px;
92-
bottom: 2px;
93+
right: 0.2em;
94+
bottom: 0.2em;
9395
opacity: 0.7;
9496
9597
&:hover {

0 commit comments

Comments
 (0)