I have created a plunk in which I want to validate a form that has a button created using font-awesome.
The text field is required and I want to disabled the icon if no data is entered.But ng-disabled
dosen't seem to support this functionality with font awesome icon.
Has anyone faced this issue before.Please share your thoughts..
Please find the plunk here
Make sure you're using the latest and greatest by updating your CDN code reference, updating your Font Awesome package via npm, or downloading a fresh copy of Font Awesome. You can check with version an icon was added to on its detail page (e.g. question-circle was added in Verion 1 but last updated in 5.0.
$("button[title='Aceptar']"). prop("disabled", true); where you can select the button by any of its property (first) and change property disabled.
I think the simple reason is that i is three characters shorter than span (resp. six including closing tag). This is what they say themselves: "Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct)."
fas - solid icons are usually filled with transparent outlines. far regular and fal light are similar. These icons are different than fas solid because they are mostly outlines and differ only in outline width. fal light icons have thinner outline compared to far regular.
Place it inside a button and it should work:
<button ng-disabled="testForm.$invalid" ng-click="$ctrl.checkIfClicked()">
<i class="fa fa-floppy-o fa-2x"></i>
</button>
You can format the style of the button in a way you want.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With