Шрифт Awesome Light через CSS
У меня есть профессиональная версия Font Awesome, которая дает мне доступ к светлым иконкам. Я создаю значки (например: значок адресной книги) через CSS следующим образом:
.icon-link::before { content: "\f2bb" }
Однако при этом отображается только обычная версия значка, а не облегченная. Что я могу сделать, чтобы отобразить облегченную версию значка, полностью используя CSS (или даже Javascript / JQuery), но не HTML?
Меня нет интересует общее решение - копаться в HTML и добавлять класс .fal (font awesome light) к каждому применимому объекту, родительскому объекту или чему-то еще.
Привет, Пол. Вы правы насчет двоеточий. Я внесу поправку. Какой файл нужно поместить в мой HTML-код? А как бы просто поставить "font-family: FontAwesome;" в CSS сделать текст светлым, не выделяя свет? Может быть, я хочу, чтобы одни из моих иконок были светлыми, а другие - нормальными или жирными.
Используйте "<link rel = " stylesheet "href = " yourCSSFileLocationOrURL.css ">" в заголовке HTML-кода. Когда вы покупали значки, они давали вам файл CSS для загрузки или ссылку, на которую вы могли бы сослаться?
Ага. Я приложил предоставленную ими таблицу стилей. Проблема в том, что я не могу заставить значки отображаться в "легком" режиме.
Ответы 1
Догадаться. Вы должны добавить: font-family: "Font Awesome 5 Pro" и font-weight: 100 (или любой другой размер шрифта, который вам нужен).
Что ж, чтобы ответить на ваш другой вопрос, поэтому вам нужно добавить семейство шрифтов, lol.
Я здесь пытаюсь уменьшить толщину плюс сайз. Я попытался добавить fontFamily и fontWeight, но, похоже, это не сработало. Вы могли бы посмотреть на это? snake.expo.io/@lindapaiste/022490
Вы импортировали правильный файл CSS в свой HTML? Кроме того, я думаю, что при использовании ключевого слова before должно быть 2 двоеточия, если вы не используете IE8. ".icon-link :: before". Вам также может понадобиться «font-family: FontAwesome;» в вашем CSS перед содержимым.