字体图标简单使用_eml图标的颜色-CSDN博客

本文链接：https://blog.csdn.net/qq_36457109/article/details/53246988

字体包下载到本地：

< style type="text/css" >

            .o {

                font-size: 300px;

                color: red;

            }

            .w {

                font-size: 100px;

                color: plum;

            }

            .icon-huangguan {

                font-size: 66px;

            }

            .icon-iconfonthuangguan {

                font-size: 30px;

            }



            .hg {

                font-size: 20px!important;

            }





   </style>

<style type="text/css">

            /*JS格式设置子图图标属性*/

         .icon {

          /* 通过设置 font-size 来改变图标大小 */

          font-size: 50px;

          width: 2em;

          height: 2em;

          /* 图标和文字相邻时，垂直对齐 */

          vertical-align: -0.15em;

          /* 通过设置 color 来改变 SVG 的颜色/fill */

          color: red;        /*改变不了多彩图标,只能改变纯色图标*/

          fill: currentColor;

          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示

             normalize.css 中也包含这行 */

          overflow: hidden;

        }



        </style>

    </head>

    <body>

        <div id="box">

            <div class="xixi">

                

                <i class="iconfont o"></i><br />

                <i class="iconfont w"></i>

                

                <i class="iconfont icon-huangguan"></i>

                <i class="iconfont icon-iconfonthuangguan"></i>

                

                

                <svg class="icon" aria-hidden="true">

                    <use xlink:href="#icon-huangguan" class="hg"></use>

                </svg>

                

                <svg class="icon" aria-hidden="true">            

                    <use xlink:href="#icon-26"></use>

                </svg>

            </div>

        </div>

    </body>

</html>