IcoMoonとのマルチカラー対戦を作成する

Question

Icomoonにsvgをアップロードして、icofontsを生成できるようにしました。そのCSSファイルに9つの異なるパスを持つマルチカラーicofont。

このicofontのコードは私のCSSに以下の通りです：

.icon-accordance_logo { 
    font-size:5em 
} 

.icon-accordance_logo .path1:before { 
    content: "\e900"; 
    color: rgb(7, 59, 75); 
} 
.icon-accordance_logo .path2:before { 
    content: "\e901"; 
    margin-left: -1.0498046875em; 
    color: rgb(7, 59, 75); 
} 
.icon-accordance_logo .path3:before { 
    content: "\e902"; 
    margin-left: -1.0498046875em; 
    color: rgb(7, 59, 75); 
} 
.icon-accordance_logo .path4:before { 
    content: "\e903"; 
    margin-left: -1.0498046875em; 
    color: rgb(7, 59, 75); 
} 
.icon-accordance_logo .path5:before { 
    content: "\e904"; 
    margin-left: -1.0498046875em; 
    color: rgb(7, 59, 75); 
} 
.icon-accordance_logo .path6:before { 
    content: "\e905"; 
    margin-left: -1.0498046875em; 
    color: rgb(7, 59, 75); 
} 
.icon-accordance_logo .path7:before { 
    content: "\e906"; 
    margin-left: -1.0498046875em; 
    color: rgb(233, 72, 112); 
} 
.icon-accordance_logo .path8:before { 
    content: "\e907"; 
    margin-left: -1.0498046875em; 
    color: rgb(22, 139, 179); 
} 
.icon-accordance_logo .path9:before { 
    content: "\e908"; 
    margin-left: -1.0498046875em; 
    color: rgb(81, 183, 149); 
} 
.icon-accordance_logo .path10:before { 
    content: "\e909"; 
    margin-left: -1.0498046875em; 
    color: rgb(254, 209, 104); 
} 

私はこのicofontにページの背景を使用します。これは私が使用しているコードです：

body:after{ 
    font-family: icomoon; 
    content: "\e900"; //This is the issue 
    font-size: 20em; 
    text-shadow: 2px 2px #ff0000; 
    z-index:10000; 
} 

コンテンツ属性は1つのパスからのみです。他のすべてのパスを挿入するにはどうしたらいいですか？私が使用する場合は、このTwitterのicofont知っているので：

.icon-twitter:before { 
    content: "\e600"; 
} 

をし、次のページの背景としてそれを使用する：それは問題なく動作

body:after{ 
    font-family: icomoon; 
    content: "\e600"; 
    font-size: 20em; 
    text-shadow: 2px 2px #ff0000; 
    z-index:10000; 
} 

。ですから、複数のパスを持つマルチカラーのicofontをページの背景として使うにはどうしたらいいですか？

brgds、 Sohail

Answer 1

1）あなたが唯一の3色を持っているときは、9 pathesを持つべきではありません！

2）あなたが唯一のすべてのrgb(7, 59, 75);

3）各パスを結ぶことにより、3 pathesを持つべきでは1つのグリフ（ "文字"）です。しかし、あなたはスタイルを作ることができます：beforeと：afterは3色ではなく、2色でのみ可能です。

ここに私の答えを参照してください、それが働いてデモ含まれていますhttps://stackoverflow.com/a/39557217/1008547

をあなたが本当に3色をしたいときは、

position: fixed; 
pointer-events: none; 

と体の最初の子として余分な要素と考える可能性があり、 btw：あなたのz-index: 1000;はかなり悪いです。