Lesson 4: Change the Feedback Icons

Matt Bradford-Aunger Updated by Matt Bradford-Aunger

In this lesson we'll take a look at restyling the feedback graphics. We'll start off by removing the neutral feedback icon. Then we'll change the remaining icons to πŸ‘and πŸ‘Ž and tidy up the layout with a little padding.

Resources

Code Snippets


<span class="feedback-emoji">πŸ‘</span>


<span class="feedback-emoji">πŸ‘Ž</span>
/* Feedback Emoji Font Size */
.feedback-emoji{
font-size: 4rem;
opacity:0.8;
transition:0.2s;
}

/* Feedback Emoji Alignment */
#article #feedback .btn-group .btn{
width:48% !important;
}

/* Remove Feedback Emoji Underline */
.btn-link:focus, .btn-link:hover{
text-decoration:none !important;
}

/* Feedback Emoji Hover Effect */
.feedback-emoji:hover{
opacity:1;
}

How did we do?

Lesson 3: Making Basic Changes to the CSS

Lesson 5: Adding a Print Button

Contact