Merhaba css hazırladığım temayı wp e dökmeye çalışıyorum.
Navbar da <?php wp_list_pages('title_li='); ?> bu kodla sayfaları listeletmek istiyorum ancak istediğim görüntüde değil. Ayrıca kodu nasıl düzenleyeceğim onu da bilmiyorum.

benim istediğim anasayfa gibi benim panelden seçtiğim bir ikon çıksın. Ayrıca span olarak tooltip kullandım bunu da gösteremiyorum.

Kodlar:

  <div class="navbar">
                <ul>
                    <a href="<?php echo home_url( '/' ); ?>"><li class="tooltips"><div id="nav"><i class="fa fa-home"></i></br>Home<span>Something else...</span></li></a>
			
         
                </ul>

Css Kodları:

.navbar {
    float: right;
    margin-top: 23px;
}
.navbar ul li {
    float: left;
    margin-left: 15px;
    width: 75px;
    height: 55px;
    text-align: center;
    background-color: rgb(236, 240, 241);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #22313F;
    font-size: 15px;
    line-height: 20px;
    text-decoration: none;
}
.navbar ul li:hover {
    background-color: #336E7B;
    color: white;
    transition: background-color .5s linear;
}
.navbar ul li a {
    text-decoration: none;

}

.navbar ul li a:visited {
    text-decoration: none;
    color: #22313F;
}
li.tooltips span {
    position: absolute;
    width:140px;
    color: #22313F;
    background: #FFFFFF;
    height: 30px;
    line-height: 30px;
    text-align: center;
    visibility: hidden;
    border-radius: 6px;
}
li.tooltips span:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0; height: 0;
    border-bottom: 8px solid #FFFFFF;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
li:hover.tooltips span {
    visibility: visible;
    opacity: 0.8;
    top: 65px;
    left: 55%;
    margin-left: -76px;
    z-index: 999;
}