I'm gonna show you two different options that you can use and you can pick which one you wanna go with, so let's get started. Thankfully all of the functionality that we need is already here, all that we're doing in this guide is styling it.

So the very first thing we wanna do is to bring in the icon and if you go to Font Awesome, we can search for the icon and feel free to use any one that you personally prefer. I'm going to go with a plus icon and specifically I'm gonna go with the plus circle icon.

So anytime that you see the naming where it says fa-plus-circle, that gives you a hint on what you need to import. So let's come into Visual Studio Code here and let's first import this from the app component. So if you come up to our list of imports, we're going to say fa and then Plus and Circle and then make sure you also add that to the list of items that we're pulling in for the library.

app.js

inport {
  faTrash,
  faSignOutAlt,
  faEdit,
  faSpinner,
  faPlusCircle
} from "@fortawesome/free-solid-svg-icons";

library.add(faTrash, faSignOutAlt, faEdit, faSpinner, faPlusCircle);

Hit save and now if you come back to the blog, we can use this. At the very top of the file we already are bringing in the Font Awesome icon library so we already have access to that and so now if you come all the way down to our link right here where it says onClick handleNewBlogClick, I wanna get rid of where it says Open Modal and I'm instead going to make a call to the Font Awesome icon component and I'll put the link and separate it out. Say FontAwesomeIcon and then the prop it expects is icon and this one is just plus-circle and then we are going to close that component off.

blog.js

<div className="new-blog-link">
  <a onClick={this.handleNewBlogClick}>
    <FontAwesomeIcon icon="plus-circle" />
  </a>
</div>

So hit save there and let's go test this out to make sure it's working and you can see we have our nice icon there.

Now we need to apply some styles to it. This is all in the blog container so let's open up the blog Sass file. And so inside of blog container, this is where we're going to add the styles for our link and so the link is called new blog link, that's the name of the class.

So I'm gonna say new-blog-link and inside of here there are a few rules we're gonna add. The first one is going to be the position and the first way I'm gonna show it to you is with position: absolute. Now one thing that you need to remember, anytime that you're wanting to use position: absolute in Sass or in CSS, the parent component or the parent element needs to be of position: relative so that means that our blog container needs to have a position: relative class or style definition and then our new blog link can then have position: absolute.

blog.scss

.blog-container {
  display: flex;
  flex-direction: column;
  align-items: center;
    position: relative;
}

So now let's say that we want it to be right: 0, so that's going to take our component, our icon, and it's gonna slide it all the way to the right of the page and then I want to have the top at zero as well and let's hit save and see what this does for us.

blog.scss

.new-blog-link {
  position: absolute;
  right: 0;
  top: 0;
}

So if you open up Google Chrome, you can kinda see the icon all the way over here.

It's not perfect yet, but at least we know it's doing exactly what we're looking for and so this is a start of what we're wanting to do. Now let's continue on and let's add some more styles, I'm going to select the link inside of our new blog link now and now let's increase the font size dramatically.

So I'm gonna say font-size: 3em, it's another reason why I love working with these icons because they're icons you get to treat like fonts, makes it much easier to be able to work with them this way. So I'm gonna say font size, I want to have a cursor so that it actually acts like a link so it has a cursor of pointer and the color is going to be primary. I'm gonna add some margin-right so let's say margin-right's gonna be 15 pixels, so it kinda takes it off of the edge of the screen a little bit.

Then let's add a transition of half a second like normal and then it'll be ease in ease out which is my favorite transition. It's a nice, easy subtle animation. So now that we have that, we just have to add a hover effect, so say &:hover and with this we're simply gonna change the color to the dark primary.

blog.scss

.new-blog-link {
  position: absolute;
  right: 0;
  top: 0;

  a {
    font-size: 3em;
    cursor: pointer;
    color: $primary;
    margin-right: 15px;
    transition: 0.5s ease-in-out;

    &:hover {
      color: $dark-primary;
    }
  }
}

Hit save and now let's see what this does for us. Oh, and it looks like we have a little issue. Oh, it's the color.

Let me open up variables. Oh, you know what, it is called teal, my fault. I have actually been working on another project where I called my main color just primary and so that's why we want dark teal and teal.

a {
  font-size: 3em;
  cursor: pointer;
  color: $teal;
  margin-right: 15px;
  transition: 0.5s ease-in-out;

  &:hover {
    color: $dark-teal;
  }

Hit save, come back and look at that, that is a great looking button.

So this if you click on it now, pops up the modal just like normal and this is pretty cool. Now, this is the absolute positioning. Remember I said I was gonna show you a couple options. So this is where this link is always gonna be exactly where it is on the page, it is positioned absolutely.

Now if you wanna have that effect that maybe you've seen on sites for a help menu or to chat or something where you have the icon placed on the bottom right hand side and then as you scroll, it actually stays in place, I wanna show you how to do that too because that can be kind of a fun look and I think that's what I'm gonna go with actually.

So the way that you can do that is change position: absolute to position: fixed and then change top. Instead of having top: 0 change that to bottom: 0 hit save, come back and now you can see that that is at the bottom of the page. You could also add some bottom margin or anything like that if you want. In fact, let's do just a little bit of instead of just margin-right, we can do margin-bottom with pixels as well.

a {
  font-size: 3em;
  cursor: pointer;
  color: $teal;
  margin-right: 15px;
  margin-bottom: 15px;
  transition: 0.5s ease-in-out;

  &:hover {
    color: $dark-teal;
  }
}

And it's hard to see. Let me show you my whole browser. There you go, that actually looks good.

Okay, so now look at this. When I'm scrolling, notice how the button actually stays fixed in the same position and that's a pretty cool effect.

You will probably have already seen that on a lot of sites where a little salesperson will pop up and will start talking to you and you can chat in there. Well, ours doesn't do that, but it does allow you to click on it and show you the blog form.

So those are all the styles that we need for that feature, so great job if you went through that. In the next guide what we're going to do is we're going to make this link only show up when you're logged in and so we're gonna add that security element because you should be the only one who can create these blog posts.

Resources

• Source code