Change Ethos hover "View Post" to icon

[fatcatgraphics]

Hey,
Im using ETHOS and when you hover over a thumb in the blog posts you get “VIEW POST” How could I change that to a font awesome icon? I tried these but nothing worked. http://pzu.a90.myftpupload.com/featured-news/

.entry-thumb:before{
content: “\f0f6”!important;
}
a.entry-thumb:hover {
content: “\f13d” !important;
color:grey;
}

TIA
Rena

[jade]

Hi Rena,

Please add this to the Global JS:

jQuery('a.entry-thumb .view').text('');

Then add this to the Global CSS:

a.entry-thumb:hover .view:after {
    content: "\f13d";
    width: 60px;
    height: 60px;
    font-size: 32px;
    text-align: center;
    color: #fff;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

Since this is a custom code that is changing the theme’s default display, you will have to modify and update the code in case it stops working or would need further customization.

Here are some reference links related to the suggestions above:

• CSS Introduction - https://www.w3schools.com/css/css_intro.asp
• How to get CSS Selectors using Chrome - https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome

Hope this helps.