Since we're going to be bringing in this icon using Font Awesome, the show notes below there is a link tag that you need to put in your index.html. Let's go in there and place it right below our fonts.

This is a link to Font Awesome, which will give us access to the their icons. Now we need to add this into our app, inside of our search bar placeholders. Open up searchBar.scss and what we need to do is give it a font family.

searchBar.scss

&::placeholder {
    color: $color-gray-two;
    font-family: 'Font Awesome\ 5 Free', 'Lato', Arial, Helvetica, sans-serif;
}

Now let's go to our searchBar.js and let's add that into our placeholder.

searchBar.js

renderInput(field) {
    return <input type="text" placeholder="&#xf002; Search DailySmarty" {...field.input} />
}

Save that now, and we go to our search page, you'd think it would work but it gives us a box. For some reason, it requires that we have a font weight of 600.

searchBar.scss

&::placeholder {
    color: $color-gray-two;
    font-family: 'Font Awesome\ 5 Free', 'Lato', Arial, Helvetica, sans-serif;
    font-weight: 600;
}

Now it should appear.

We have our icon here and everything's looking good on this page. resizes nicely. If we really wanted to, we could make media queries if we wanted this to go even smaller.

If I open up the chrome console and I click on this little mobile thing down here, "toggle device toolbar".

We can see what it looks like on screens. Right now it's a little too big, but we could add media queries to make it not too big, look what happened to results.

This is too big, so we'll get around to fixing that. But basically, we can make it mobile responsive pretty easily once we're done. But for now, we have a working for the most part.

This is all working, but we don't have all the styles. Let's go ahead and hop into the next guide where we will start styling the grid for our results and then go from there.

Let's commit our code.

git status
git add .
git commit -m "implemented font awesome into searchbar"

See you in the next guide.

Resources

Code at this stage

Link to Font Awesome

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg"
  crossorigin="anonymous">