I'm not a big fan of links as I don't think they look professional. So, in this guide we are going to replace the edit and delete links with some nice-looking icons.

Thankfully, bootstrap comes with this option because the library ships with the full Glyphicon icon set.

Go to getbootstrap.com and navigate to Components. Here, you can see the full list of icons. Pick the one you like. I'm going to choose a pencil for editing and a trash can for deleting. The good part about these icons is that they can be called like pure css classes.

Next open the file _post.html.erb. Let's now remove the text argument for the link_to method and add a class with the name of the icon, like this:

<!-- app/views/posts/_post.html.erb -->

<td>
  <%= link_to '', edit_post_path(post), id: "edit_#{post.id}", class: 'glyphicon glyphicon-pencil index-icons' if policy(post).update? %>
</td>
<td>
  <%= link_to '', post_path(post), method: :delete, id: "delete_post_#{post.id}_from_index", class: 'glyphicon glyphicon-trash index-icons', data: { confirm: 'Are you sure?' } %>
</td>

This should now work. Refresh your browser and the icons will now appear.

This is a nice improvement, however it still needs work. I don't like the line below both the icons and to change that, let's create a class called index-icons.

Now, open your post.scss file and define this class in it. Here, I'm increasing the size of the icon. Also, I'm changing the hover effect as I want the icon to change to black color when the mouse moves over it.

/* app/assets/stylesheets/posts.scss */

.index-icons {
  font-size: 1.5em;
}

.index-icons:hover {
  text-decoration: none;
  color: black;
}

And that looks much better in the browser!

Now if you run all of the tests you'll see that they're still passing.