How to create a multicolor font icon for buttons in ionic


#1

i`m trying to put a font icon with multiple color but is not working.

i need something like this.

I see in csstricks the way to create a multiple font icon but the code in ionic see like this.

Here`s my code.

/Load font icons/

[class^=“st-icon-”] {
display: inline-block;
vertical-align: top;
white-space: nowrap;
/* child elements absolute /
position: relative;
/
remove inline-block white-space /
margin-right: -.16em; /
5px /
/
if not already universally applied /
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/
padding here for text, icons replicate this using size and position:absolute - padding makes touch-target bigger /
padding: 0.143em;
/
units used in font: 1em = 2048, icons 2400 wide, so icons are 1.171875em (2400/2048). Add padding x2 to get size: /
height: 1.45788em;
width: 1.45788em;
font-size: 1.815em;
/
text hidden old-school */
text-align: left;
text-indent: -9999px; }

/* position:absolute stacks pseudo elements - extra <span> in markup = 2 extra pseudo elements /
[class^=“st-icon-”]:before,
[class^=“st-icon-”]:after,
[class^=“st-icon-”] span:before,
[class^=“st-icon-”] span:after {
display: block;
position: absolute;
white-space: normal;
/
match padding above /
top: 0.143em;
left: 0.143em;
/
undo text hidden /
text-indent: 0;
/
inherits size from parent, ems cascade /
font-size: 1em;
font-family: “Stackicons-Social”;
font-weight: 400 !important;
font-style: normal !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
/
screenreaders /
speak: none;
/
transitions here */ }

.st-icon-amazon:before {
/* character code - unicode private use area /
content: “\e079”; /
black “a” */
color: black; }

.st-icon-amazon:hover:before {
color: #626262; }

.st-icon-amazon:after {
content: “\e080”; /* orange smile */
color: #ff9900; }

.st-icon-amazon:hover:after {
color: #ffbd59; }