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