1cm69 1cm69 - 7 months ago 26
HTML Question

Coloured Background Behind Fontawesome Brand Icon

I have a number of fontawesome brand icons on my site that I use as link to various other sites.

I have managed to style these brand icons to match to brand colours on hover but am completely stuck with one in-particular, Flickr.

For the time being I have displayed it with a gradient background, half blue & half pink but I am not very happy with it.

What I really want is that the only visible colour should be the blue, rgb(0,99,220), around the outside of the Flickr brand icon but that the background directly behind the icon should be the blue/pink gradient so on hover the two holes in the icon display as left hole blue & right hole pink.

I have attempted to achieve this by making the background the same size as the icon and have this use the gradient and then wrap 8px blue border around the background but I cannot get this to work, everything seems to go out of alignment and looks awful.

I have cut back the html & css to only include the needed parts for posting here.



/* Renaming of FONT AWESOME fonts */

.soc-flkr:before {
content: "\f16e";
}
/* Footer Social Buttons */

ul.soc-icns {
list-style: none;
display: block;
float: left;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 10px;
padding-left: 0px;
}
ul.soc-icns li {
display: inline;
}
/* Footer Section Icons */

.soc-icns a.socFlickr:hover {
background: rgb(0, 99, 220);
background: -moz-linear-gradient(left, rgb(0, 99, 220) 0%, rgb(0, 99, 220) 50%, rgb(255, 0, 132) 50%, rgb(255, 0, 132) 100%);
background: -webkit-linear-gradient(left, rgb(0, 99, 220) 0%, rgb(0, 99, 220) 50%, rgb(255, 0, 132) 50%, rgb(255, 0, 132) 100%);
background: linear-gradient(to right, rgb(0, 99, 220) 0%, rgb(0, 99, 220) 50%, rgb(255, 0, 132) 50%, rgb(255, 0, 132) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#0063dc', endColorstr='#ff0084',GradientType=1 )";
border: 1px solid rgb(201, 201, 201);
}
.soc-icns a.socFlickr:hover i {
color: rgb(255, 255, 255);
}
.soc-sq li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align: center;
width: 24px;
height: 24px;
font-size: 16px;
border: 1px solid rgb(141, 141, 141);
line-height: 24px;
color: rgb(141, 141, 141);
vertical-align: middle;
}
.soc-sq li i {
margin-top: 0px;
}
.soc-sq li a:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.soc-sq i {
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.soc-icns a {
background-color: rgb(201, 201, 201);
}

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


<div>
<ul class="soc-icns soc-sq">
<li><a href="https://www.flickr.com" target="_blank" class="socFlickr" title="Flickr"><i class="fa soc-flkr"></i></a>
</li>
</ul>
</div>





Any help would be greatly appreciated

Regards..,

Answer

Finally solved this by using SVG-edit

The SVG code looks like this:

    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Flickr Background</title>
  <rect id="Blue" height="24" width="24" x="0" y="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null"  stroke-width="0" stroke="#000000" fill="#0063dc"/>
  <rect id="Pink" height="12" width="6" x="12" y="6" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null"  stroke-width="0" stroke="#000000" fill="#ff0084" rx="5" ry="5"/>
 </g>
</svg>

I saved this as flickr.svg and then altered my current CSS file from:

.soc-icns a.socFlickr:hover {
  background: rgb(0, 99, 220);
  background: -moz-linear-gradient(left, rgb(0, 99, 220) 0%, rgb(0, 99, 220) 50%, rgb(255, 0, 132) 50%, rgb(255, 0, 132) 100%);
  background: -webkit-linear-gradient(left, rgb(0, 99, 220) 0%, rgb(0, 99, 220) 50%, rgb(255, 0, 132) 50%, rgb(255, 0, 132) 100%);
  background: linear-gradient(to right, rgb(0, 99, 220) 0%, rgb(0, 99, 220) 50%, rgb(255, 0, 132) 50%, rgb(255, 0, 132) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#0063dc', endColorstr='#ff0084',GradientType=1 )";
  border: 1px solid rgb(201, 201, 201);
}

to:

.soc-icns a.socFlickr:hover
{
    background: url(flickr.svg);
    border: 1px solid rgb(201,201,201);
}

and it works like a dream.

Here's a working Fiddle

I've never used SVG before but it appears very simple to use & it seems more intuitive than CSS.

Hope this answer helps others.

Regards..,