Hello,
I have spent many hours trying to figure out this issue on my site as well.
All I'm trying to do is add custom HTML social media icons to my site. I'm creating a "gallery" of sorts in which each business featured will need to have social media icons, so I can't use the built-in icons since the changes to the links are applied site-wide.
When in editing mode with the CSS window open, the social icons appear appropriately and the rollover function works as intended. The first image shows how it looks in the editor with my cursor over the Facebook icon. The second image shows how it looks on the live site with the cursor in the same position.
I have basically 0 coding experience, and I've tried a lot of different things to get this to work with no success. If anyone could provide assistance, that would be very much appreciated!
Below, I have pasted the HTML that is inserted on the page:
<align-left>
<ul class="social-icons">
<li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
</ul>
</div>
And, here I have pasted the CSS that I am using in the Custom CSS editor:
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
body {
font-family: 'Lato', sans-serif;
color: #FFF;
background: #ffff;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: #fff;
}
p > a:hover{
color: #ffff;
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1% 0 1% 0;
}
._12 {
font-size: 1.2em;
}
._14 {
font-size: 1.4em;
}
ul {
padding:0;
list-style: none;
}
.footer-social-icons {
width: 350px;
display:block;
margin: 0 auto;
}
.social-icon {
color: #ffff;
}
ul.social-icons {
margin-top: 10px;
}
.social-icons li {
vertical-align: top;
display: inline;
height: 100px;
}
.social-icons a {
color: #333333;
text-decoration: none;
}
.social-icons a:hover {
color: #ffff;
}
.fa-facebook {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #ffff;
}
.fa-facebook:hover {
background-color: #3d5b99;
}
.fa-twitter {
padding:10px 12px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #ffff;
}
.fa-twitter:hover {
background-color: #00aced;
}
.fa-instagram {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #ffff;
}
.fa-instagram:hover {
background-color: #F56040
;
}
.fa-youtube {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-youtube:hover {
background-color: #e64a41;
}
.fa-linkedin {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-linkedin:hover {
background-color: #0073a4;
}
.fa-github {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-github:hover {
background-color: #5a32a3;
}
