Как добавить значок шрифта awesome после элементов до

Привет, я пытаюсь добавить значок font awesome в элементы до и после, но я не знаю, как написать его css и как получить ссылки на значки font awesome, чтобы поместить его в after before css.

Я создал такую структуру.

 <html>
	<head>
		<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
	</head>
	<style>
		.thish{position:relative; height:150px; width:150px ; background:red;  }
		.thish::before{position:absolute; content:'tyjthsrgd';right:40%; color:#000; bottom:0; height:30px; width:60px; background:green; z-index:1; }
	</style>
	
	<body>
		<div class = "thish"> 
		</div>
	</body>
 </html>

Font Awesome 5 имеет примеры об этом (хотя вы используете v4.7.0).

— 28.05.2018 08:59

Если мой ответ вам помог, примите его

— 31.05.2018 17:58

html css font-awesome

28.05.2018 07:16

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

12 749

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

Ответы 2

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

Добавить в селектор beforeпсевдо

   content: "\f2ba";
   font: normal normal normal 14px/1 FontAwesome;

Чтобы получить значение content, перейдите к их Веб-сайт,

Щелкните правой кнопкой мыши -> Проверьте любой значок (тег <i> ::before </i>), а затем проверьте значение содержимого в селекторе beforeпсевдо.

Не забудьте указать значение шрифта

normal normal normal 14px/1 FontAwesome;

Это очень важно.

<html>

<head>
  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

</head>
<style>
  .thish {
    position: relative;
    height: 150px;
    width: 150px;
    background: red;
  }
  
  .thish::before {
    position: absolute;
   content: "\f2ba";
   font: normal normal normal 14px/1 FontAwesome;
    right: 40%;
    color: #000;
    bottom: 0;
    height: 30px;
    width: 60px;
    background: green;
    z-index: 1;
  }
</style>

<body>

  <div class = "thish">
  </div>


</body>

</html>

Есть ли способ добавить значок и добавить к нему текст? Что-то вроде content: "\f2ba - message that appears next to icon"

— 23.11.2020 22:21

28.05.2018 07:20

Для Fontawesome 4

Вам просто нужно добавить следующий CSS в свой элемент after или before:

font: normal normal normal 14px/1 FontAwesome;
content: '\f042';

Здесь content - это значок, который вы хотите добавить. Просто скопируйте Unicode значка с веб-сайта FA и вставьте его в контент с префиксом \.

.thish {
  position: relative;
  height: 150px;
  width: 150px;
  background: red;
}

.thish::before {
  position: absolute;
  font:normal normal normal 14px/1 FontAwesome;
  content: '\f042';
  right: 40%;
  color: #000;
  bottom: 0;
  height: 30px;
  width: 60px;
  background: green;
  z-index: 1;
}

<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet"/>

<div class = "thish">
</div>

Большое спасибо за ответ.

— 28.05.2018 07:31

28.05.2018 07:28

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

Как разделить поле ввода для otp в angular4 и html?

Сбой тестового примера относительно границы

Использование HTML и CSS3: как расширить границы внутренней таблицы по вертикали, чтобы она касалась внешней таблицы

Как z-index работает в полноэкранном режиме?

Разрыв страницы печати MVC не работает, содержимое обрезается

Ограничить пространство, где может случайным образом появляться div, JQuery

CSS Box Анимация теней и мерцание пикселей

Изменить заголовок H1 для индекса блога без уничтожения URL

Почему моя попытка добавить и удалить классы в HTML-элементе работает только в одну сторону?

Размер распечатанной страницы не одинаков в разных браузерах

Как добавить значок шрифта awesome после элементов до

Ответы 2

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

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