Блог

Главная - Вопросы по программированию - Переместить круг в правом верхнем углу шрифта awesome bell

Переместить круг в правом верхнем углу шрифта awesome bell

#html #css #font-awesome

#HTML #css #шрифт-awesome

Вопрос:

У меня есть шрифт awesome bell, и я пытаюсь сделать так, чтобы колокольчик появился в правом верхнем углу звонка. Вот пример того, что я хочу сделать в paint.NET https://gyazo.com/2d74f611e2df81362bc3f2e946f9d747

И вот что я пробовал до сих пор:

 .notification {
	background: red;
	border-radius: 50%;
	border: 1px solid red;
	height: 8px;
	width: 8px;
	position: relative;
}  
 <i class='fa fa-bell notification'></i>

Но это помещает колокольчик с левой стороны. Я пробовал: раньше, но это просто заставило его исчезнуть.

Заранее благодарю.

Ответ №1:

Поместите position: relative; в <i> -tag, а затем в свой CSS добавьте:

 .notification:after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    background: red;
    top: 0;
    right: 0;
    border-radius: 50%;
}

Ответ №2:

Попробуйте:after вместо :before, потому что font-awesome использует :before для отображения фактического значка шрифта