css - 2 Vertical background colors for a font icon -


i'm trying create flickr icon using font-awesome, , represent colors accurately (which means purple , blue dot on each side of icon). i'm trying less using gradients. i've been unable figure out how vertically align gradients (i can figure out horizontal).

what have far:

.fa-flickr:before {     color: #fff;      background-image: linear-gradient(to left, #0062da 100%, #0062da 100%),                       linear-gradient(to right, #ff0084 100%, #ff0084 100%);     background-size: 100% 50%, 100% 50%;     background-position: 0 0, 0 100%;     transform: rotate(90%);     background-repeat: no-repeat;             } 

http://jsfiddle.net/fqjhe/2/

this leaves gradients stacked in wrong direction, , shows color outside icons. i'd appreciate pointers on how gradients rotated, , on excess colors great well.

looks want:

.fa-flickr {             color: #fff;      background-image: linear-gradient(to right, #0062da 50%, #ff0084 50%);        background-size: 80% 80%;      background-position:center;     background-repeat: no-repeat;         } 

demo.


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

thorough guide for profiling racket code -