Changing 2 Icons

Hello,
I would like to change some 2 pre-established icons:
1.- I would like to have another dynamic icon at the very beginning oh my website, I mean, while it is loading.
2.- I would like to change the "link" icon that appears when you hoover the mouse over any image.

How can I get it?

Where can I see the icon options I have within the template?

Can you help me please?

Thank you!!

The loader isn't an icon - it is a complex css animation defined this way:

Code: Select all

/**
 *
 * Preloader
 *
 **/
.gkIsWrapper-gk_creativity.notloaded .gkIsLoader {
   -webkit-animation-name: gkistimer;
   -webkit-animation-duration: 0.75s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
      -moz-animation-name: gkistimer;
      -moz-animation-duration: 0.75s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
           animation-name: gkistimer;
           animation-duration: 0.75s;
           animation-iteration-count: infinite;
           animation-timing-function: linear;
   border: 2px solid #fff;
   -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
           border-radius: 50%;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
   content: "";
   display: block;
   height: 32px;
   left: 48%;
   position: relative;
   top: 48%;
   width: 32px;
}

.gkIsWrapper-gk_creativity.notloaded .gkIsLoader:before {
   background: #fff;
   -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
           border-radius: 2px;
   content: "";
   display: block;
   height: 2px;
   left: 48%;
   position: relative;
   top: 48%;
   -webkit-transform-origin: 0 50%;
      -moz-transform-origin: 0 50%;
           transform-origin: 0 50%;
   width: 10px;
}

.gkLoadMore:hover .gkLoader {
   border-color: #fff;
}

.gkLoadMore:hover .gkLoader:before {
   background: #fff;
}

@-webkit-keyframes gkistimer {
   from { -webkit-transform: scale(1.0) rotateZ(0deg); }
   50% { -webkit-transform: scale(1.2) rotateZ(180deg); }
   to { -webkit-transform: scale(1.0) rotateZ(360deg); }
}

@-moz-keyframes gkistimer {
   from { -moz-transform: scale(1.0) rotateZ(0deg); }
   50% { -moz-transform: scale(1.2) rotateZ(180deg); }
   to { -moz-transform: scale(1.0) rotateZ(360deg); }
}

@keyframes gkistimer {
   from { transform: scale(1.0) rotateZ(0deg); }
   50% { transform: scale(1.2) rotateZ(180deg); }
   to { transform: scale(1.0) rotateZ(360deg); }
}


in style.css file.

To modify each link icon (as they are not defined in one place), you should use firebug or chrome dev tools and find font awesome declarations like that one:

Code: Select all

gkNspPM-Portfolio .gkImagesWrapper > a > .gkImgOverlay > span:before {
content: "\f0c1";
}


and modify the content code according to font awesome guide.

Ok, thank you.

Could you please help me?, I want to change the logo of facebook that appears over the team members when you hoover the mouse. I would like to have another icon, something like a plus sign "+", or the phrase: "learn more". The simplest solution you can give me will be the best for me.

Thank you!!

Please edit: /templates/gk_creativity/css/override.css and add at its end:

Code: Select all

.gkTeamOverlay a[data-type="fb"]:before {
content: '\f067';
width: 46px;
}


Remember to enable "CSS override" in template settings - advanced section.

Thank you, it is perfect!