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

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

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

Я могу сделать color: #f00;, и текст становится красным, так что это не селектор. Также в инструментах def в 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>

источник

2015-08-13 Controvi

@paulie Я видел примеры, которые используют размер шрифта, но я также попытался использовать размер и высоту, но никак не повлиял на значок. Также нет способа воссоздать это. он встроен в страницу, и это только что произошло. Я действительно начинаю думать, что это может мне столкнуться с чем-то сильным. – Controvi

Я просто добавил пример кода. в этой ситуации это не сработает. также как состояние в OP, я загрузил fonticon zip. Также следуйте инструкциям по их добавлению на страницу. На других сайтах он используется с размером шрифта, так как я скачал его как fonticon. Я предполагаю, что он рассматривается как шрифт, а не как что-то еще. – Controvi

OK ... у вас есть CSS ... например, '@font -face' для загрузки шрифта. Черт возьми, ты хочешь ссылку на живую страницу, на которую мы можем смотреть ... возможно, это было бы проще? –

Используйте этот класс в ваш css, чтобы изменить размер шрифта.

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

font-size: 150px; 

}

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

источник

2015-08-13 10:16:28

Хороший вопрос и просто попробовал, но не работал. есть некоторые веб-сайты, которые, как я знаю, используют его, и они используют шрифт. Так что это должно «работать», но я понятия не имею, что я делаю неправильно – Controvi

Я изменил ответ. этот я проверил. его работы на моей стороне. –

он работал как шарм. Это довольно странно, что он не работает с обычными классами и размером шрифта Спасибо за помощь! – Controvi

точно можно добавить !important к вашему CSS декларации

Например:

font-size:100px !important;

источник

2015-08-13 10:06:37 Nabi

вещь в том, что она не переопределяется. Но я действительно старался использовать важное, но, к сожалению, ничего не делал. – Controvi

@Controvi use http://fortawesome.github.io/Font-Awesome/ – Nabi

Я, но у них нет какой-либо иконки, которая мне нужна. ;) – Controvi

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

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

источник

2015-08-26 09:44:29 rubikcube

-1

Просто удалите 'font-size: 20px;' найденный в файле flaticon.css, и тогда вы сможете установить нужный размер в вашем файле css.

источник

2015-09-27 08:58:08 Ingridk

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

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

источник

2015-11-01 19:29:48 Aleksa

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

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

font-size: 1em; 

}

Тогда размер значка может быть изменен другими классами, используя размер шрифта

источник

2015-12-02 22:26:50 Roger

В 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; 
}

источник

2016-03-24 09:47:19 ecmedia

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

источник

2017-12-21 11:05:31

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

ответ

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