Can I use vue-fontawesome to checkmark a checkbox?

Question

I use vue-fontawesome along with font-awesome-icon. This is great for stand-alone icons:

<font-awesome-icon :icon="icon" size="1x" /> . 

But how can I use the fontovesome flag for <input type="checkbox"> in the vue component?

Answer 1

There is a way to search for css pseudo elements:

 FontAwesomeConfig = { searchPseudoElements: true }; 

This method is not recommended, as it will check existing markup and use CSS styles to add inline SVG for pseudo-elements, which is slow.

I do not recommend this method, so I will not explain how it works, if you are interested, you can learn more about it here .

---

Instead of using pseudo-elements, create a component for these checkboxes.

We will create a single file component called awesome-checkbox .

AwesomeCheckbox.vue

 <template> <div :class="{'awesome-checkbox': true, [wrapperClassName]: !!wrapperClassName}" :style="{ color: isChecked ? checkedColor : uncheckedColor }"> <input :id="id" :name="name" type="checkbox" class="awesome-checkbox__input" v-model="checkboxModel"> <label :for="id" :style="{ cursor }" class="awesome-checkbox__label" @click="toggleCheck"> <font-awesome-icon :icon="isChecked ? checkedIcon : uncheckedIcon" :size="size" /> </label> </div> </template> <script> import FontAwesomeIcon from '@fortawesome/vue-fontawesome'; import { faSquare, faCheckSquare } from '@fortawesome/fontawesome-free-solid'; /** * Custom HTML <input> checkbox element using Font-Awesome-Icon 5 icons for visual effect. */ export default { name: 'awesome-checkbox', components: { FontAwesomeIcon }, props: { /** * A wrapper class other than default that provides extra manipulation from parent component. */ wrapperClassName: { type: String, default: null, }, /** * The name attribute for the checkbox input. */ name: { type: String, default: null, }, /** * The id attribute for the checkbox input. */ id: { type: String, default: null, required: true, }, /** * The model directive value to create two-way data binding. */ model: { type: Boolean, default: null, required: true, }, /** * The mouse cursor to display when the mouse pointer is over the Font-Awesome-Icon 5 element. * Accepts any cursor CSS property value. */ cursor: { type: String, default: 'pointer', }, /** * The Font-Awesome-Icon 5 imported icon object used for the unchecked state. */ uncheckedIcon: { type: Object, default: () => faSquare, }, /** * The Font-Awesome-Icon 5 imported icon object used for the checked state. */ checkedIcon: { type: Object, default: () => faCheckSquare, }, /** * The Font-Awesome-Icon 5 icon size. */ size: { type: String, default: '1x', }, /** * The Font-Awesome-Icon 5 icon color used for the unchecked state. */ uncheckedColor: { type: String, default: 'inherit', }, /** * The Font-Awesome-Icon 5 icon color used for the checked state. */ checkedColor: { type: String, default: 'inherit', }, }, data() { return { isChecked: !!this.model, checkboxModel: this.model, }; }, methods: { emitModelValueUpdate() { /** * Update event. * * @event update * @type {boolean} */ this.$emit('update:model', this.isChecked); }, /** * Gets called when the user clicks on the label element. */ toggleCheck() { this.isChecked = !this.isChecked; this.emitModelValueUpdate(); }, }, }; </script> <style lang="scss" scoped> .awesome-checkbox { display: inline-flex; &__label { font-size: 1em; // Change Font-Awesome-Icon 5 icon size with css instead of predefined Font-Awesome-Icon 5 size prop. } &__input { display: none; // Hide the HTML <input> element. } } </style> 

And use it in the parent component, for example:

 <template> <div> <awesome-checkbox :model.sync="acceptTerms" checkedColor="#41B883" uncheckedColor="#E0EAF1" cursor="pointer" size="1x" id="my-awesome-checkbox" name="acceptTerms" :checkedIcon="faCheckSquare" :uncheckedIcon="faSquare" /> </div> </template> <script> import { faSquare, faCheckSquare } from '@fortawesome/fontawesome-free-solid'; import AwesomeCheckbox from '@/components/path/to/AwesomeCheckbox'; export default { name: 'parent-component', components: { AwesomeCheckbox }, data() { return { acceptTerms: false, faSquare, faCheckSquare, }; }, }; </script> <style lang="scss" scoped> /* ... */ </style> 

---

You can expand this component according to your needs, for example, make model prop more than one type, for example Array, and not a logical one.

I just made this component for your question and did not test it completely, please use it carefully.

Answer 2

You can do this the usual way by hiding <input> with css display:none , and then using the <label> style with css and the pseudo ::before class.

Here is a working Jfiddle with Vue and Fontawesome https://jsfiddle.net/skribe/9fxsn797/3/

In your component ...

 <input id='ckb_1' type="checkbox" v-model="ckb_1" value="checked"> <label for='ckb_1'>Check Box</label> 

In your css ...

 input[type=checkbox] + label::before { content: '\f0c8'; font-family: FontAwesome; display: inline-block; padding-right: 5px; } input[type=checkbox]:checked + label::before { content: '\f14a'; } input { display:none; } 

I added v-model to make it Vue-esque, but there is nothing special about the "vue component" method, except that it is in the vue component.