Font Awesome Icons on Team Overlays

I am having a miserable time at failing to get the font awesome to work in replacing demo data-fb="#" data-twitter="#" data-gplus="#"

fa-picture-o
fa-external-link
fa-usd

Can you give me an example for a simply change to the html in the module or some kind of override.css


I found the article how to disable but I prefer to use the original styled overlay. https://www.gavick.com/forums/john/disa ... lays-37272

Thank you.

Code: Select all

test

test?

I don't understand what needs to be tested.

Hi

Sorry, for the "test". I had problem to post answear and was checking if anything can be added. Here is what I've been trying to answer.


First add below line to /layout/blocks/head.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Than disable using editor in user settings and add new classes to icons. Example:

Code: Select all

class="fa fa-facebook"


i just added this to css override in template......

Code: Select all

.gkTeam a[data-type="fb"]:before {
content: "\f0c1";
}

That is excellent. Thanks for this short version. I could use this in my bank of how-to.

I was trying to keep the same icon effect using fa fa-ICON-NAME.

I ended up doing a new custom and simple overlay.

Code: Select all

.memberbox {
   border:1px solid #ccc;
   padding:5px;
   height:342px;
   width:196px;
}
.memberoverlay { 
   background-color: #1DBAF4;
   text-align:center;
   opacity:0;    
   width:100%;height:100%;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.memberbox:hover {
   border:1px solid #555;
   border-radius:5px;
}
.memberbox:hover .memberoverlay {
   opacity:1;
}

.memberinfo {
   position:relative;
   top:20%;
}
.membersearch {
   position:relative;
   top:30%;
}
.memberenvelope {
   position:relative;
   top:40%;
}