Ripro子主题二级菜单如何添加带颜色圆圈小图标

ripro子主题美化包，可以说在UI这方面做的非常不错，甚至可以细化到二级菜单文字前面的带颜色的小圆圈样式，加上和不加的效果还是有很大区别的，小编带大家看下加上之后的效果：

Java潘老师现在教大家该如何实现这样的效果，步骤如下：

1）第一步：打开你的ripro子主题里的文件，找到diy.css自定义样式文件，然后搜索下是否已经存在了类似如下的样式代码，如果没有，直接复制粘贴进去：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

.lanse {
box-sizing: border-box;
content: ”;
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #7a99f2;
}

.lvse {
box-sizing: border-box;
content: ”;
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #70d7cf;
}

.huangse {
box-sizing: border-box;
content: ”;
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #f5c745;
}

.hongse {
box-sizing: border-box;
content: ”;
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #f1787f;
}

2）第二步就是打开wordpress网站后台的 外观->自定义，找到二级子菜单设置为位置，在菜单导航标签文字前添加如下内容即可：

<i class="lanse"></i>

这里的lanse就代表蓝色小圆圈，同样的方式设置红色（hongse ）、绿色（lvse）和黄色（huangse ），当然，你有css基础也可以自己自行定义一些样式，这里就不演示了。

ok，最后我们发布后刷新首页就会发现你心心念念彩色小圆圈就出来了，是不是很简单。