-3

I added text to an element with jQuery but the font doesn't match.

I used: 

jQuery(document).ready(function(){
jQuery("i.fas.fa-search").text(" SEARCH");

How can I target just the text to change the font-family?

Matthew McLennan
  • 155
  • 6
  • Unclear (to me atleast) what it is you ask. Is it this: https://stackoverflow.com/questions/7321896/jquery-find-element-by-text – Asons May 02 '19 at 19:24
  • try like this $('i.fas.fa-search').css("font-family", ''font name"); – Alex Ciu May 02 '19 at 19:25
  • And if you mean how to give a text a certain font, you need to target its wrapper – Asons May 02 '19 at 19:25
  • Why are you trying to alter the font-family of a font-awesome icon element? Are you trying to change the element's appearance? If so you would alter the class. If you are trying to insert text AFTER the element you would need to use append on the icon's parent. $("#mySearchContainer").append("SEARCH") – Chris B. May 02 '19 at 19:27
  • @RutherfordWonkington Thank you. Will you change your comment to an answer? – Matthew McLennan May 02 '19 at 19:41

2 Answers2

1

Sure thing!

The i element only contains the icon; it can contain other text but leads to complications in my experience. To add text adjacent to the icon I'd recommend appending text to the icon's container element. So if you had:

<button id="button"><i class="fas fa-search"></i></button>

You'd use:

 $("#button").append("<span>Search</span>");

This adds a span element after the search icon within the button element. If you're trying to accomplish something simple like a hover reveal you could even just put the span in there to begin with and reveal it with CSS properties to prevent having to add and remove it programatically, but adding it with JS will work if you just want to add it in once.

Chris B.
  • 5,477
  • 1
  • 12
  • 30
0

Try this code .

Create a class in your css:

.prjct-font{
  font-family: 'your-font';
}

in Jquery: 

jQuery(document).ready(function(){
  jQuery("i.fas.fa-search").html('<span class="prjct-font"> SEARCH</span>');
});

Because of font-awesome you can change i Tag font

mohamedvall
  • 144
  • 2
  • 4