изменение размера шрифта в шрифтах

Question

изменение размера шрифта в шрифтах

3

Я использую дочернюю тему paralax pro genesis, поэтому я работаю в области виджета.

Я не уверен, правильно ли я это сделаю, но я попытался написать под шрифтом удивительный значок, выполнив это в области виджетов:

<i class="fa fa-code fa-4x">Fully mobile responsive designs 
that adjust to fit all platforms</i>

Это работает, но текст огромен. Как я могу изменить размер текста? Я попытался изменить размер шрифта в разделе .fa-кода в шрифте awesome css, но он не работает. Есть ли лучший способ, которым я мог бы писать под своим значком или это так, как это должно быть сделано?

Спасибо!

Jeffrey Cunningham 08 июнь 2015, в 07:13

Источник

0

Хорошо, я пришел к выводу о том, как лучше всего выполнить редактирование текста для значков шрифтов в области текстовых виджетов темы parallax pro. Если вы поместите текст в теги , как показано выше, и попытаетесь настроить таргетинг текста в css с использованием .fa или .fa-кода, вы будете ориентироваться не только на текст, но и на весь значок. Поэтому вы должны создать отдельный элемент в значке шрифта, заключив текст в теги . Затем вы можете использовать .fa p {text-size 20px;} или, если быть более точным, .fa- (какой бы значок вы ни использовали) p {text-size 20px;}
Jeffrey Cunningham 10 июнь 2015, в 04:12

Теги:

wordpress

css

css3

font-awesome

genesis

5 ответов

Ещё вопросы

Хорошо, я пришел к выводу о том, как лучше всего выполнить редактирование текста для значков шрифтов в области текстовых виджетов темы parallax pro. Если вы поместите текст в теги , как показано выше, и попытаетесь настроить таргетинг текста в css с использованием .fa или .fa-кода, вы будете ориентироваться не только на текст, но и на весь значок. Поэтому вы должны создать отдельный элемент в значке шрифта, заключив текст в теги . Затем вы можете использовать .fa p {text-size 20px;} или, если быть более точным, .fa- (какой бы значок вы ни использовали) p {text-size 20px;}

Yeldar Kurmangaliyev · Answer 1 · 2015-06-08T04-53-00.000Z

Собственно, значки шрифта - это текстовые символы. Это означает, что на его размер влияет свойство font-size.

fa Класс CSS означает шрифт-удивительный шрифт и общие стили.
fa-code Класс CSS обозначает указанный значок.
fa-4x Класс CSS означает "font-size: 4em;"

Это означает, что когда вы включаете свой текст в поле FA, весь текст будет увеличен в 4 раза. В вашем примере не должно быть текста в теге .

<i class="fa fa-code fa-4x"></i> 
Fully mobile responsive designs that adjust to fit all platforms

Теперь вы можете манипулировать текстом вне вашего тега i, как обычно.

См. ниже рабочий пример:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row text-center">
  <i class="fa fa-code fa-4x"></i>
</div>
<div class="row text-center">    
  <span class="red-text-for-example">Fully mobile responsive designs that adjust to fit all platforms</span>
 </div>

Смотрите здесь: http://jsfiddle.net/c3Lbcmjb/

Кроме того, вы не должны изменять файл font-awesome.css.
Он предоставляет вам множество удобных способов управления размерами, шрифтами, цветами и т.д.

Если вы хотите манипулировать размером значка FA, измените класс fa-4x на fa-3x, fa-2x и т.д. (или вообще удалите его, если вам нужен значок FA, который будет иметь тот же размер вашего текст).

Большое спасибо! Вероятно, это лучший способ сделать так, чтобы текст не был связан с потрясающим стилем шрифта.
@JeffreyCunningham Вы можете пометить этот ответ как правильный, чтобы он больше не отображался в списке вопросов без ответа. Это предотвратит случайное добавление новых ответов (например, самых последних).

Surabhi Rai · Answer 2 · 2015-06-08T05-18-00.000Z

3

в селекторе css:

font-size: 4em;

Surabhi Rai 08 июнь 2015, в 05:18

0

Если вы собираетесь ответить на вопрос, пожалуйста, добавьте более подробную информацию: stackoverflow.com/help/how-to-answer
Jordan 08 июнь 2015, в 10:28
1

Спасибо за вашу помощь, но это не работает. Я поместил для следующего в моем основном файле CSS: .fa-code {margin-left: 75px; поле справа: 75 пикселей; размер шрифта: 100 пикселей; код поля делает именно то, что я хочу, но размер текста не меняется. Есть идеи почему?
Jeffrey Cunningham 09 июнь 2015, в 02:11

Jordan · Answer 3 · 2015-06-08T04-49-00.000Z

1

Решение:

Используя вашу основную таблицу стилей, просто добавьте:

.fa-code {
    font-size: 20px;
}

Вышеуказанное предназначено только для значка символа шрифта. Если вы хотите настроить таргетинг на все значки, просто используйте:

.fa {
    font-size: 20px;
}

В качестве альтернативы вы можете добавить стиль в линию, это не считается хорошей практикой, но я думал, что объясню оба пути.

<i class="fa fa-code" style="font-size: 20px;">Fully mobile responsive designs that adjust to fit all platforms</i>

Я использовал 20px в качестве примера, но просто изменил значение в соответствии с вашими потребностями. Надеюсь, это поможет!

Jordan 08 июнь 2015, в 04:49

0

Я не уверен, что это то, что люди называют "не считается хорошей практикой". Вы описываете тег i с классом fa-4x что означает «font-size: 4em;». Затем вы описываете встроенный стиль "font-size: 20px;" который переопределяет класс CSS CSS.
Yeldar Kurmangaliyev 08 июнь 2015, в 04:31
1

Использование встроенных стилей считается плохой практикой, я не уверен, что вы пытаетесь сказать ...
Jordan 08 июнь 2015, в 04:33
0

Я пытался сказать, что у вас описан класс 'fa-4x' для i . Вы редактировали это. Теперь это выглядит лучше.
Yeldar Kurmangaliyev 08 июнь 2015, в 04:38
0

Да, я был в середине редактирования, когда вы прокомментировали.
Jordan 08 июнь 2015, в 04:40
0

Спасибо Джордан, это большая помощь!
Jeffrey Cunningham 09 июнь 2015, в 01:30
0

На самом деле это не работает. Я поместил текст внутри тегов и создал следующий код в моем основном файле CSS: .fa-code {margin-left: 75px; поле справа: 75 пикселей; размер шрифта: 100 пикселей; Код поля работает, но текст не меняет размер.
Jeffrey Cunningham 09 июнь 2015, в 02:06
0

Эй, Джордан, я понял это. Селектор, который мне нужно было использовать, был i.fa.fa-code. Что заставило бы его использовать такой странный селектор?
Jeffrey Cunningham 09 июнь 2015, в 02:22
0

@JeffreyCunningham Вам не нужно использовать этот селектор, селектор, который я указал в своем ответе, работает нормально. Смотрите скрипку для работы демо - jsfiddle.net/eh981wze
Jordan 09 июнь 2015, в 11:36
0

@jordan Но если вы напишете слова, они не появятся. Я попробовал именно эту вещь в теме про параллакс, и размер текста не меняется.
Jeffrey Cunningham 09 июнь 2015, в 21:55
0

@JeffreyCunningham Что вы имеете в виду "если вы пишете слова в нем"? Вы имеете в виду, если вы пишете между тегами example ?
Jordan 10 июнь 2015, в 02:01
0

Да, в jsfiddle.net/eh981wze ничего не появляется, когда вы пишете между или внутри тегов , но это не относится к делу. Я все еще не могу изменить размер шрифта в моей теме. Я обновлю здесь, когда найду решение относительно того, что происходит. Если у вас есть дочерняя тема parallax pro и лишняя секунда, попробуйте использовать потрясающий значок шрифта fa-code, затем перейдите в основной файл CSS и используйте .fa-code {font-size: 20px; } чтобы увидеть, о чем я говорю.
Jeffrey Cunningham 10 июнь 2015, в 03:34
0

кстати, это в домашнем разделе 2 виджет области демо
Jeffrey Cunningham 10 июнь 2015, в 03:40
0

Если вы пишете между тегами, все работает нормально - jsfiddle.net/eh981wze/1
Jordan 10 июнь 2015, в 12:02
0

и боюсь, что нет, я никогда раньше не использовал ни одной темы. Я всегда все кодировал с нуля. Помимо определенных рамок, конечно.
Jordan 10 июнь 2015, в 12:04

Показать ещё 12 комментариев

Kris1 · Answer 4 · 2015-06-08T04-49-00.000Z

Вы можете использовать CSS в строке или внешнем

<i class="fa fa-code fa-6" style="font-size: 7em;"></i>

H. Aydin · Answer 5 · 2016-10-27T16-37-00.000Z

Fully mobile responsive designs that adjust to fit all platforms

Я думаю, что это решит ваш вопрос. Вы должны разделить тег и ваши предложения с помощью или тегов.