با سلام و خسته نباشید من میخوام برای آیکن های منو از عکس استفاده کنم به جای font ولی تو ورد پرس مشکل دارم سایت های زبان اصلی رو هم چک کردم فقط تو کلاس های اختیاری css یه کلاس اضافه میکنه و بعدش هم کدهای css رو مینویسه اون کارم کردم درست نشد از پلاگین افزودن تصویر استفاده کردم درست شد ولی من میخوام خودم کدهای این بخش رو تنظیم کنم لطفا اگه کدهای من ایراد داره بفرمایید ایرادش کجاست


ایجاد منوها به صورت دستی با UL/LI




<ul>
<li><a href="#"><span id="icon"><img src="<?php bloginfo('template_url');?>/images/food.png"></span>غذاها</a></li>
</ul>


ایجاد منوها به صورت داینامیک با ورد پرس


<?php wp_nav_menu(array('theme_location'=>'main_menu')) ?>




کدهای css برای ایجاد منو


.main_menu{
margin: 0px 140px;
}
.main_menu ul{
height:50px;
margin-top: 32px;

}
.main_menu ul li{
float:right;
padding:0px 5px;
margin-left:12px;
border: 1px dashed #0072bc;
background: #ccb;
border-radius: 5px;
background:url(images/bg.png);
box-shadow: 0px 0px 3px #0072bc inset;
width:120px;
margin-bottom: 30px;

}
.main_menu ul li a{
float:right;
color:#5A5858;
text-align: center;
margin: 5px 10px;
font-size: 20px;
font-family: yekan;


}


.main_menu ul li #icon {
width:100%;
float:right;
text-align:center;


}
.main_menu ul li #icon img{

height: 50px;
width: 50px;
margin-top:5px;
}


فقط برای اضافه کردن تصویر من از کد زیر استفاده میکم ولی تصویر رو نمایش نمیده



.main_menu .homeicons{
display:block !important;
background-image: url(../images/fish-n.png)!important;
background-repeat: no-repeat !important;
background-position: left!important;
padding-left: 5px!important;
}

.main_menu ul li a :after {
width:100%;
float:right;
text-align:center;


}




اینم لینک صفحه ایی که بر اساس اون تغییرات رو ایجاد کردم

https://www.wpbeginner.com/plugins/h...-in-wordpress/