How to integrate the awesome font in Laravel?

Asked

Viewed 916 times

-1

I’m using the awesome font in Windows along with bootstrap, until then used via Link, both css and js.

Today I’m migrating to control via npm, but I install and the icon does not appear. They can tell me what could be?

<div class="input-group">
   <input type="text" class="form-control" placeholder="Buscar por palavra-chave" autofocus aria-describedby="input_search" >
   <div class="input-group-append">
     <span class="input-group-text p-l-r-40" id="input_search" >
        <i class="fas fa-search"></i>
     </span>
   </div>
</div>

When running "npm install" + [email protected]

  • you are doing something front-end or back-end ?

  • @I’m sorry, I didn’t understand your question.

  • What are you developing? if yes is back end ... then you need to install in your folder public and not in the npm package, or it is Front End that you are programming in conjunction with Backend?

2 answers

3


Even installing via NPM, you still need to reference the files in your project. Font Awesome itself has in its documentation a reference to how to use icons using a package manager.

That question has a much more comprehensive answer, but it’s in English. Anyway, you will need to reference the font-awesome file in some way, for example:

@import url('../node_modules/font-awesome/css/font-awesome.min.css');

That link also contains a very explanatory and even more comprehensive tutorial along with your latest version (both in English).

2

I’ll just tell you what I did in case anyone else got to this point...

executed via npm:

npm install --save @fortawesome/fontawesome-free

Then I went on:

Resources/Sass/app.scss

And I inserted the following code block:

//FontAwesome
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

And executed

npm run dev

I gave our friend the correct answer because his answer led me to this solution, so it would be just!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.