Невозможно изменить размер flaticon с размером шрифта

Я использую Flaticon для веб-сайта, который я разрабатываю, но, кажется, что-то не так, и я не могу узнать, что.

Я загрузил zip-файл из flaticon с опцией "icon font". поэтому я загрузил его в папку моего шрифта, но по какой-то причине, когда я связываю css и ставлю <i class="flaticon-crowd"><i> в моем html я получаю значок в размере по умолчанию, но когда я ставлю font-size:70px; в css он не становится больше.

Я могу сделать color: #f00; и текст становится красным, так что это не селектор. Также в Def tools в chrome показывают, что размер шрифта 70px используется и не отменяется.

кто-нибудь знает, что может быть причиной этой проблемы ?

спасибо за ваше время.

вот пример html, который я использую

<!DOCTYPE html>
<html>
    <head>
        <!-- flaticon -->
        <link rel="stylesheet" type="text/css" href="assets/css/flaticon/flaticon.css">

        <title></title>
    </head>
    <body>
        <i style="font-size: 70px" class="flaticon flaticon-crowd"></i>
    </body>
</html>
7
css fonts html icons

8 ответов

используйте этот класс в css для изменения размера шрифта.

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {

font-size: 150px;

}

надеюсь, это решит вашу проблему.

5

лучшим решением было:

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {

font-size: 1em;

}

затем размер значка может быть изменен другими классами с помощью font-size

7

это сработало для меня:

.flaticon-fast46::before{
font-size: 40px;}
1

наверняка вы можете добавить !important к вашей декларации css

например:

font-size:100px !important;
0

используйте псевдо-класс: перед тем, как изменить значок, как вы хотите. Вы можете применить все текстовые свойства css для изменения значков.

.flaticon-crowd:before {
    font-size: 17px;
}
0

в flaticons.css изменить класс по умолчанию в это:

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: "Flaticon" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
0

это сработало для меня. Добавить :before после класса элемента, который вы хотите использовать для значков.

span:before{
font-size: 50px;
}
0

просто удалите " размер шрифта: 20px;", найденный во flaticon.css-файл, а затем вы сможете установить размер, который вы хотите в своем css-файле.

-1