html javascript 如何用颜色码设置icon的颜色？

 <!-- class里明确写上red，可以将icon设置成红色  -->
 <i class="red ace-icon fa fa-square"></i>

现在想做64个不同颜色的图标，让用户点击选择颜色；如何用颜色码设置icon的颜色？

背景：我用了一个前端框架，ace-icon fa fa-square是框架自定义的正方形的icon

自己定义64个不同背景色（你那个icon应该是一个小方块之类的吧）的类，一次加上就行了

 <style>
.icon1{background-color:#f00}
.icon2{background-color:blue}
.....
</style>
<i class="red ace-icon fa fa-square icon1"></i>
<i class="red ace-icon fa fa-square icon2"></i>
....

https://zhidao.baidu.com/question/529777240.html

可以给这个i标签写个样式设置颜色，但是要加上关键字 !important ,这样会优先使用你写的样式

 i{background-color:yellow !important;}

你的css文件中是否写正确了？

谢谢大家，我把我实现的code贴出来了；得去补补css的知识了

 <ul class="dropdown-menu">                                                     
    <style>
        <% 
        int i=1, j=1, k=1, indexClr=0;
        String colorStr = "";
        String colorI = "";
        String colorJ = "";
        String colorK = "";
        for (i=1; i<5; i++) {
            colorI = Integer.toHexString(4*(i-1)+(i-1));
            for (j=1; j<5; j++) {
                colorJ = Integer.toHexString(4*(j-1)+(j-1));
                for (k=1; k<5; k++) {
                    colorK = Integer.toHexString(4*(k-1)+(k-1));                                                                                
                    colorStr = "#" + colorI + colorJ + colorK;
                    indexClr = indexClr + 1;
        %>
            .icon<%=indexClr%>{background-color:<%=colorStr%>;color:<%=colorStr%>}
        <%  
                }
            }                                                                   
        }
        %>  
    </style>
    <%
    i=1; j=1; k=1; indexClr=0;  
    colorStr = "";
    colorI = "";
    colorJ = "";
    colorK = "";
    for (i=1; i<5; i++) {
        colorI = Integer.toHexString(4*(i-1)+(i-1));
        for (j=1; j<5; j++) {
            colorJ = Integer.toHexString(4*(j-1)+(j-1));
            for (k=1; k<5; k++) {
                colorK = Integer.toHexString(4*(k-1)+(k-1));                                                                                
                colorStr = "#" + colorI + colorJ + colorK;
                indexClr = indexClr + 1;
    %>
    <a href="javascript:void(0)" data-color="<%=colorStr%>" targetCanvas="#colors_sketch">                                                                                                                                      
        <i class="ace-icon fa fa-square-o icon<%=indexClr%> bigger-150"></i>    
    </a>
    <%
            }
        }                                                                   
    }
    %>                                                                                                                                                                                                                                                                                                                                              
</ul>