如何制作超棒的字体CSS

Question

I have used font-awesome of

<i class="fa fa-circle-o text-red"></i>

It shows a circle with red outline. I want it to become full red circle and blink.

Sorry I am not a front end developer so I couldn't think of its solution.

what I tried to do is

.text-red
{
    background-color: red;
}

but this didn't work. Can anyone help? Thank you

Answer 1

As said you could try css animation , already using background you can change background-color , now using opacity you can create that blinking effect as below,

 .fa{ color:red; background:red; border-radius:50%; animation:op 3s ease infinite; } @keyframes op{ 0%{ opacity:0; } 50%{ opacity:1; } 100%{ opacity:0; } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <i class="fa fa-circle-o text-red"></i> 

Answer 2

You can Just Use css rules background:red, border-radius:100% and color:red;

 .text-red { color:red; background: red; border-radius: 100%; } 

 <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" > <i class="fa fa-circle-o text-red"></i>