Is it possible to color the fontawesome icon colors?

前端 未结 7 1899
甜味超标
甜味超标 2021-01-30 05:27

I can change fontcolor, but not the \"fill\". I first tried setting background-color, but that fills the whole icon box area.

For example, I have



        
相关标签:
7条回答
  • 2021-01-30 06:12

    Extending to the above answers, sometimes you want to add stroke/border to the font/icon. In that case the following is presented.

    At least in WebKit. Example:

    h1 {
       -webkit-text-stroke-width: 1px;
       -webkit-text-stroke-color: black;
    }
    

    Or shorthand:

    h1 {
      -webkit-text-stroke: 1px black;
    }
    

    The stroke works in WebKit but disappears in other browsers! Alternative? We can use the text-shadow property and simulate a stroke.

    h1 {
        text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    }
    

    We use four shadows, each 1px offset of black with no spread, one each to the top right, top left, bottom left, and bottom right.

    The only holdout would be IE9 and down, which of course you can use IE specific CSS to account for.

    P.S. For my own reference as well.

    Source: Link

    0 讨论(0)
提交回复
热议问题