Настройка размера значка?

Я хочу увеличить размер значка с помощью свойства CSS. Какое свойство может увеличить размер значка?

<p><i class = "fa fa-phone course_phn_icon"></i> Mon - Sat : 8 AM to 9 PM</p>

Я попробовал свойства ширины и высоты и размер шрифта также с этим именем класса: course_phn_icon

17.07.2019 07:37

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Размер значка Font Awesome можно контролировать с помощью свойства font-size. Пример: font-size: 40px;. Это должно работать нормально.

17.07.2019 07:39

Вы также можете

1). используйте встроенный класс fa-*x или

2). вы можете сделать это, используя font-size свойство CSS.

.icon:before {
  font-size: 45px;
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin = "anonymous">
<p><i class = "fa fa-phone course_phn_icon fa-2x"></i> Mon - Sat : 8 AM to 9 PM</p>
<p><i class = "fa fa-phone course_phn_icon icon"></i> Mon - Sat : 8 AM to 9 PM</p>

@Anudeepsyamprasad, что не работает? Вы включили правильный CDN и правильно указали class? Я сделал рабочий фрагмент выше, используя последний fontawesomeversion 5

— 17.07.2019 08:00

— 17.07.2019 08:14

@Anudeepsyamprasad Обновил ответ. Пожалуйста, взгляните на это сейчас. Вам нужно использовать псевдокласс :before для v-4. Если вы считаете, что мой ответ был полезен, проголосуйте и примите мой ответ. Удачного кодирования :)

— 17.07.2019 08:18

17.07.2019 07:49

Ответ принят как подходящий

Вы можете использовать fa-*g. Также см. здесь. Например:

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p><i class = "fa fa-phone course_phn_icon fa-lg"></i> Mon - Sat : 8 AM to 9 PM</p>
<p><i class = "fa fa-phone course_phn_icon fa-2x"></i> Mon - Sat : 8 AM to 9 PM</p>
<p><i class = "fa fa-phone course_phn_icon fa-3x"></i> Mon - Sat : 8 AM to 9 PM</p>
<p><i class = "fa fa-phone course_phn_icon fa-4x"></i> Mon - Sat : 8 AM to 9 PM</p>

17.07.2019 07:50

Другие вопросы по теме

Как создать линию неправильной кривой с помощью CSS3, HTML5, SVG и Jquery?

Изменение цвета цвета текста на основе оператора case switch значения

Заголовок выпадающей таблицы скрыт таблицей

Воссоздайте макет изображения Google

Фоновое изображение неправильно растянуто в Safari

У меня возникла проблема с изменением некоторых значений моих свойств для компонента svg в проекте React

Невозможно, чтобы мои объекты JavaScript отображались в отдельных столбцах

Попытка создать адаптивный макет, но правый div продолжает нажимать на верхнюю часть div слева

Используя средство выбора даты, необходимо применить разные стили для сегодняшней даты и выбранной даты

-webkit-fill-available не работает в Firefox

Настройка размера значка?

Ответы 3

Другие вопросы по теме

Похожие вопросы