Создайте многоцветный столкновение с IcoMoon

Question

Я загрузил svg в Icomoon, чтобы он мог генерировать icofonts. Его многоцветный icofont с 9 различными путями в файл css.

Код для этого 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; 
} 

Атрибут контента относится только к одному пути. Как вставить все другие пути и возможно ли это? Потому что я знаю, если использовать этот твиттер 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) Вы не должны иметь 9 трактов, когда у вас есть только три цвета!

2) Вы должны иметь только 3 трактов путем объединения всех rgb(7, 59, 75);

3) Каждый путь один символ ("буква"). Но вы можете только стиль: до и: после и так возможно только с двумя цветами, а не с тремя.

Смотрите мой ответ здесь, он содержит рабочий дем: https://stackoverflow.com/a/39557217/1008547

Если вы действительно хотите, 3 цвета, вы могли бы подумать о дополнительном элементе в качестве первого ребенка тела с

position: fixed; 
pointer-events: none; 

И Кстати: ваш z-index: 1000; довольно плохо.