Как добавить новые флатиконы на мой сайт?

У меня есть шаблон сайта, в котором используются флатиконы. У него есть папка с файлами flaticon.css, flaticon.eot, flaticon.ttf, flaticon.svg, flaticon.woff и некоторые другие. Я могу использовать значки, просто импортируя CSS в страницу и делая что-то вроде <i class="flaticon-world-grid">.Как добавить новые флатиконы на мой сайт?

Теперь я хочу загрузить некоторые новые флатиконы и использовать их на своем сайте. Я нашел некоторые на flaticon.com, и он дает мне возможность загрузить его в нескольких форматах. Как «установить» эти файлы и отредактировать мой CSS, чтобы я мог использовать новые значки, подобные тем, которые уже есть?

устанавливаемых сотовый файл имеет содержание так:

.flaticon-wand2:before { 
    content: "\e0fb"; 
} 
.flaticon-wealth:before { 
    content: "\e0fc"; 
} 
.flaticon-website34:before { 
    content: "\e0fd"; 
} 
.flaticon-world-grid:before { 
    content: "\e0fe"; 
}

Какого формат должен скачать, куда помещать новые файлы, и что добавить в файл CSS, чтобы иметь возможность использовать их?

источник

2016-08-24 Kidades

загрузить набор, который вы хотите, и загружать их в папку public_html для Вашего сайта, то использовать код CSS они обеспечивают – mlegg

Это звучит, как вы хотели бы установить лицо шрифта над CSS, который вы разместили, а затем установите семейство шрифтов для каждого из этих классов для нового шрифта. Как показано ниже: [https://css-tricks.com/snippets/css/using-font-face/](https://css-tricks.com/snippets/css/using-font-face/). –

Как уже упоминалось, here вы можете использовать два или более шрифта, с другим именем семейства шрифтов.

Как это:

@font-face { 
    font-family: "Flaticon"; 
    src: url("../fonts/Flaticon.eot"); 
    src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"), 
     url("../fonts/Flaticon.woff") format("woff"), 
     url("../fonts/Flaticon.ttf") format("truetype"), 
     url("../fonts/Flaticon.svg#Flaticon") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

[class^="flaticon-"], [class*=" flaticon-"] { 
    /* use !important to prevent issues with browser extensions that change fonts */ 
    font-family: flaticon !important; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
} 


.flaticon-arrows:before { content: "\f100"; } 
.flaticon-back:before { content: "\f101"; } 

/** 

New Fonts to add 

*/ 

@font-face { 
    font-family: "Flaticon1"; 
    src: url("../fonts/Flaticon1.eot"); 
    src: url("../fonts/Flaticon1.eot?#iefix") format("embedded-opentype"), 
     url("../fonts/Flaticon1.woff") format("woff"), 
     url("../fonts/Flaticon1.ttf") format("truetype"), 
     url("../fonts/Flaticon1.svg#Flaticon") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
    font-family: "Flaticon1"; 
    src: url(".../fonts/Flaticon1.svg#Flaticon") format("svg"); 
    } 
} 

[class^="flaticon1-"]:before, [class*=" flaticon1-"]:before, 
[class^="flaticon1-"]:after, [class*=" flaticon1-"]:after { 
    font-family: Flaticon1; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
} 
.flaticon1-shapes:before { content: "\f100"; } 
.flaticon1-share:before { content: "\f101"; }

источник

2017-02-27 10:33:15

Как добавить новые флатиконы на мой сайт?

ответ

Смежные вопросы