How to change placeholder with Font-Awesome content using jQuery?
This solution needs only:
- one line of jQuery
- CSS property
font-family:FontAwesome
- No HTML at all
You'll need the specific CSS code for the icon prefixed with a \u
. Font-Awesome documents only class and unicode. Fortunately, this site has what you need. Here's what it should be in jQuery:
$('.mandatory_field').attr('placeholder', '\uf0a4 Mandatory field');
The only difference between CSS and JavaScript font entities is the u
in the second character position for JavaScript.
In the demo, I also added some styles with the ::placeholder
pseudo element as a bonus. You can style your placeholders without affecting the user input style.
Demo
$('.mandatory_field').attr('placeholder', '\uf0a4 Mandatory field');
/* With the exception of font-family:FontAwesome everything
|| is optional.
*/
input {
font: inherit
}
.mandatory_field::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: red;
font-family: FontAwesome;
font-variant: small-caps;
}
.mandatory_field::-moz-placeholder {
/* Firefox 19+ */
color: red;
font-family: FontAwesome;
font-variant: small-caps;
}
.mandatory_field:-ms-input-placeholder {
/* IE 10+ */
color: red;
font-family: FontAwesome;
font-variant: small-caps;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css">
<input type="text" class="mandatory_field form-control" id="affiliation">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use a data
attribute to store the awesome font symbol you want and use it combined with the text $input.data('placeholder') + ' Mandatory field'
.
Code example:
var $input = $('#affiliation'),
placeholder = $input.data('placeholder') + ' Mandatory field';
$input.attr('placeholder', placeholder);
.mandatory_field {
font-family: FontAwesome,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-placeholder="" class="mandatory_field form-control" id="affiliation">