Search code examples
htmlcssfontscss-shapes

change shape of font icon using css

I have downloaded font-icon from flaticon.com

  • to change font-icon color we can use css like this:

    .flaticon-baby23:before {
     content: "\e000";
     color:red;
}

  • to change size we use this:

    .flaticon-baby23:before {
     content: "\e000";
     font-size:15px;
}

Is ther any method to change shape of font-icon like given in the picture i found those from here is webisteenter image description here
Those are various shape

  • how do i change icon shape???

my styleenter image description here

Solution

  • The way those icons are changing "shape" is that the border radius, background, and drop-shadow is being applied to them. The icon itself (the twitter bird) is not changing.

    Depending on what you are trying to do, you might be able to do the same.

    If you are trying to get the edges of the phone font icon to be rounded, that is not possible unless you find one that has that already. If, instead, you are trying to create a background for your icon similar to the twitter icons you showed, style the font icon with a border-radius, background-color and drop-shadow.