قرار دادن یک عکس در کنار یک متن (html - css)

[سیدرضا بازیار]

من یه منو باز شوند عمودی دارم و میخوام در کنار لیست های منو عکس مربوط به اون رو بزارم

میخوام در کنار "کتاب" یه عکس کتاب قرار بدم (به طرز زیبایی قرار بگیره - ایکن نباشه! عکس باشه با فرمت png)

بهترین روش برای این کار چیه؟

<style>
    @import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
    @import url(http://fonts.googleapis.com/css?family=Pacifico);
    body {
        font-family: "Lato", Helvetica, Arial;
        font-size: 16px;
    }

    *, *:before, *:after {
        -webkit-border-sizing: border-box;
        -moz-border-sizing: border-box;
        border-sizing: border-box;
    }

    .container-kazerun {
        width: 300px;
        margin: 1px auto;
    }
    .container-kazerun > ul {
        list-style: none;
        padding: 0;
        margin: 0 0 20px 0;
    }

    .dropdown-kazerun {
        position: relative;
    }
    .dropdown-kazerun a {
        text-decoration: none;
      
    }
    .dropdown-kazerun [data-toggle="dropdown-kazerun"] {
        display: block;
       text-align:right;
        color: white;
        background: #C0392B;
        -moz-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
        -webkit-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
        box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
        padding: 10px;
    }
    .dropdown-kazerun [data-toggle="dropdown-kazerun"]:hover {
        background: #cd3d2e;
    }
    .dropdown-kazerun [data-toggle="dropdown-kazerun"]:before {
        position: absolute;
        content: '\25BC';
        font-size: 0.7em;
        color: #fff;
        top: 13px;
        left:10px;
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -moz-transition: -moz-transform 0.6s;
        -o-transition: -o-transform 0.6s;
        -webkit-transition: -webkit-transform 0.6s;
        transition: transform 0.6s;
    }
    .dropdown-kazerun > .dropdown-menu-kazerun {
        max-height: 0;
        text-align:right;
        overflow: hidden;
        list-style: none;
        padding: 0;
        margin: 0;
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -moz-transition: max-height 0.6s ease-out;
        -o-transition: max-height 0.6s ease-out;
        -webkit-transition: max-height 0.6s ease-out;
        transition: max-height 0.6s ease-out;
        animation: hideAnimation 0.4s ease-out;
        -moz-animation: hideAnimation 0.4s ease-out;
        -webkit-animation: hideAnimation 0.4s ease-out;
    }
    .dropdown-kazerun > .dropdown-menu-kazerun li {
        padding: 0;
    }
    .dropdown-kazerun > .dropdown-menu-kazerun li a {
        display: block;
        color: #6f6f6f;
        background: #EEE;
        -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
        -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
        box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
        text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
        padding: 10px 10px;
    }
    .dropdown-kazerun > .dropdown-menu-kazerun li a:hover {
        background: #f6f6f6;
    }
    .dropdown-kazerun > input[type="checkbox"] {
        opacity: 0;
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .dropdown-kazerun > input[type="checkbox"]:checked ~ .dropdown-menu-kazerun {
        max-height: 9999px;
        display: block;
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        animation: showAnimation 0.5s ease-in-out;
        -moz-animation: showAnimation 0.5s ease-in-out;
        -webkit-animation: showAnimation 0.5s ease-in-out;
        -moz-transition: max-height 2s ease-in-out;
        -o-transition: max-height 2s ease-in-out;
        -webkit-transition: max-height 2s ease-in-out;
        transition: max-height 2s ease-in-out;
    }
    .dropdown-kazerun > input[type="checkbox"]:checked + a[data-toggle="dropdown-kazerun"]:before {
        -moz-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        -moz-transition: -moz-transform 0.6s;
        -o-transition: -o-transform 0.6s;
        -webkit-transition: -webkit-transform 0.6s;
        transition: transform 0.6s;
    }

    @keyframes showAnimation {
        0% {
            -moz-transform: scaleY(0.1);
            -ms-transform: scaleY(0.1);
            -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
        }
        40% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        100% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }
    @-moz-keyframes showAnimation {
        0% {
            -moz-transform: scaleY(0.1);
            -ms-transform: scaleY(0.1);
            -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
        }
        40% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        100% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }
    @-webkit-keyframes showAnimation {
        0% {
            -moz-transform: scaleY(0.1);
            -ms-transform: scaleY(0.1);
            -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
        }
        40% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.04);
            -ms-transform: scaleY(1.04);
            -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
        }
        100% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }
    @keyframes hideAnimation {
        0% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(0);
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
        }
    }
    @-moz-keyframes hideAnimation {
        0% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(0);
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
        }
    }
    @-webkit-keyframes hideAnimation {
        0% {
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
        60% {
            -moz-transform: scaleY(0.98);
            -ms-transform: scaleY(0.98);
            -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
        }
        80% {
            -moz-transform: scaleY(1.02);
            -ms-transform: scaleY(1.02);
            -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
        }
        100% {
            -moz-transform: scaleY(0);
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
        }
    }
</style>

<div class="container-kazerun">
    <ul>
        <li class="dropdown-kazerun">
            <input type="checkbox" />
            <a href="#" data-toggle="dropdown-kazerun">لوازم التحریر</a>
            <ul class="dropdown-menu-kazerun">
                <li><a href="#">کتاب</a></li>
                <li><a href="#">دفتر</a></li>
                <li><a href="#">مداد</a></li>
                <li><a href="#">پاک کن</a></li>
            </ul>
        </li>
        <li class="dropdown-kazerun">
            <input type="checkbox" />
            <a href="#" data-toggle="dropdown-kazerun">تست</a>
            <ul class="dropdown-menu-kazerun">
                <li><a href="#">تست ۱</a></li>
                <li><a href="#">تست ۲</a></li>
                <li><a href="#">تست ۳</a></li>
                <li><a href="#">تست ۴</a></li>
            </ul>
    </ul>
</div>

[m2n]

اندازه؟

[سیدرضا بازیار]

اندازه؟

کوچک باشه. دقیقا طوری که در منو جا بشه و ضایع نباشه

[m2n]

<style>
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
 @import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
    font-family: "Lato", Helvetica, Arial;
    font-size: 16px;
}
*, *:before, *:after {
    -webkit-border-sizing: border-box;
    -moz-border-sizing: border-box;
    border-sizing: border-box;
}
.container-kazerun {
    width: 300px;
    margin: 1px auto;
    direction: rtl;
}
.container-kazerun > ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.dropdown-kazerun {
    position: relative;
}
.dropdown-kazerun a {
    text-decoration: none;
}
.dropdown-kazerun [data-toggle="dropdown-kazerun"] {
    display: block;
    text-align: right;
    color: white;
    background: #C0392B;
    -moz-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
    -webkit-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
    box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    padding: 10px;
}
.dropdown-kazerun [data-toggle="dropdown-kazerun"]:hover {
    background: #cd3d2e;
}
.dropdown-kazerun [data-toggle="dropdown-kazerun"]:before {
    position: absolute;
    content: '\25BC';
    font-size: 0.7em;
    color: #fff;
    top: 13px;
    left: 10px;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transition: -moz-transform 0.6s;
    -o-transition: -o-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
}
.dropdown-kazerun > .dropdown-menu-kazerun {
    max-height: 0;
    text-align: right;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -moz-transition: max-height 0.6s ease-out;
    -o-transition: max-height 0.6s ease-out;
    -webkit-transition: max-height 0.6s ease-out;
    transition: max-height 0.6s ease-out;
    animation: hideAnimation 0.4s ease-out;
    -moz-animation: hideAnimation 0.4s ease-out;
    -webkit-animation: hideAnimation 0.4s ease-out;
}
.dropdown-kazerun > .dropdown-menu-kazerun li {
    padding: 0;
    position: relative;
}
.dropdown-kazerun > .dropdown-menu-kazerun li i {
    padding: 0;
    display: inline-block;
    float: right;
    height: 24px;
    width: 24px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    right: -5px;
    text-indent: 0;
}
.dropdown-kazerun > .dropdown-menu-kazerun li a {
    display: block;
    color: #6f6f6f;
    background: #EEE;
    -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
    -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
    box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
    padding: 10px 10px;
    text-indent: 27px;
}
.dropdown-kazerun > .dropdown-menu-kazerun li a:hover {
    background: #f6f6f6;
}
.dropdown-kazerun > input[type="checkbox"] {
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.dropdown-kazerun > input[type="checkbox"]:checked ~ .dropdown-menu-kazerun {
    max-height: 9999px;
    display: block;
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    animation: showAnimation 0.5s ease-in-out;
    -moz-animation: showAnimation 0.5s ease-in-out;
    -webkit-animation: showAnimation 0.5s ease-in-out;
    -moz-transition: max-height 2s ease-in-out;
    -o-transition: max-height 2s ease-in-out;
    -webkit-transition: max-height 2s ease-in-out;
    transition: max-height 2s ease-in-out;
}
.dropdown-kazerun > input[type="checkbox"]:checked + a[data-toggle="dropdown-kazerun"]:before {
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -moz-transition: -moz-transform 0.6s;
    -o-transition: -o-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
}
 @keyframes showAnimation {
 0% {
 -moz-transform: scaleY(0.1);
 -ms-transform: scaleY(0.1);
 -webkit-transform: scaleY(0.1);
 transform: scaleY(0.1);
}
 40% {
 -moz-transform: scaleY(1.04);
 -ms-transform: scaleY(1.04);
 -webkit-transform: scaleY(1.04);
 transform: scaleY(1.04);
}
 60% {
 -moz-transform: scaleY(0.98);
 -ms-transform: scaleY(0.98);
 -webkit-transform: scaleY(0.98);
 transform: scaleY(0.98);
}
 80% {
 -moz-transform: scaleY(1.04);
 -ms-transform: scaleY(1.04);
 -webkit-transform: scaleY(1.04);
 transform: scaleY(1.04);
}
 100% {
 -moz-transform: scaleY(0.98);
 -ms-transform: scaleY(0.98);
 -webkit-transform: scaleY(0.98);
 transform: scaleY(0.98);
}
 80% {
 -moz-transform: scaleY(1.02);
 -ms-transform: scaleY(1.02);
 -webkit-transform: scaleY(1.02);
 transform: scaleY(1.02);
}
 100% {
 -moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
}
}
 @-moz-keyframes showAnimation {
 0% {
 -moz-transform: scaleY(0.1);
 -ms-transform: scaleY(0.1);
 -webkit-transform: scaleY(0.1);
 transform: scaleY(0.1);
}
 40% {
 -moz-transform: scaleY(1.04);
 -ms-transform: scaleY(1.04);
 -webkit-transform: scaleY(1.04);
 transform: scaleY(1.04);
}
 60% {
 -moz-transform: scaleY(0.98);
 -ms-transform: scaleY(0.98);
 -webkit-transform: scaleY(0.98);
 transform: scaleY(0.98);
}
 80% {
 -moz-transform: scaleY(1.04);
 -ms-transform: scaleY(1.04);
 -webkit-transform: scaleY(1.04);
 transform: scaleY(1.04);
}
 100% {
 -moz-transform: scaleY(0.98);
 -ms-transform: scaleY(0.98);
 -webkit-transform: scaleY(0.98);
 transform: scaleY(0.98);
}
 80% {
 -moz-transform: scaleY(1.02);
 -ms-transform: scaleY(1.02);
 -webkit-transform: scaleY(1.02);
 transform: scaleY(1.02);
}
 100% {
 -moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
}
}
 @-webkit-keyframes showAnimation {
 0% {
 -moz-transform: scaleY(0.1);
 -ms-transform: scaleY(0.1);
 -webkit-transform: scaleY(0.1);
 transform: scaleY(0.1);
}
 40% {
 -moz-transform: scaleY(1.04);
 -ms-transform: scaleY(1.04);
 -webkit-transform: scaleY(1.04);
 transform: scaleY(1.04);
}
 60% {
 -moz-transform: scaleY(0.98);
 -ms-transform: scaleY(0.98);
 -webkit-transform: scaleY(0.98);
 transform: scaleY(0.98);
}
 80% {
 -moz-transform: scaleY(1.04);
 -ms-transform: scaleY(1.04);
 -webkit-transform: scaleY(1.04);
 transform: scaleY(1.04);
}
 100% {
 -moz-transform: scaleY(0.98);
 -ms-transform: scaleY(0.98);
 -webkit-transform: scaleY(0.98);
 transform: scaleY(0.98);
}
 80% {
 -moz-transform: scaleY(1.02);
 -ms-transform: scaleY(1.02);
 -webkit-transform: scaleY(1.02);
 transform: scaleY(1.02);
}
 100% {
 -moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
}
}
 @keyframes hideAnimation {
 0% {
 -moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
}
 60% {
 -moz-transform: scaleY(0.98);
 -ms-transform: scaleY(0.98);
 -webkit-transform: scaleY(0.98);
 transform: scaleY(0.98);
}
 80% {
 -moz-transform: scaleY(1.02);
 -ms-transform: scaleY(1.02);
 -webkit-transform: scaleY(1.02);
 transform: scaleY(1.02);
}
 100% {
 -moz-transform: scaleY(0);
 -ms-transform: scaleY(0);
 -webkit-transform: scaleY(0);
 transform: scaleY(0);
}
}
 @-moz-keyframes hideAnimation {
 0% {
 -moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
}
 60% {
 -moz-transform: scaleY(0.98);
 -ms-transform: scaleY(0.98);
 -webkit-transform: scaleY(0.98);
 transform: scaleY(0.98);
}
 80% {
 -moz-transform: scaleY(1.02);
 -ms-transform: scaleY(1.02);
 -webkit-transform: scaleY(1.02);
 transform: scaleY(1.02);
}
 100% {
 -moz-transform: scaleY(0);
 -ms-transform: scaleY(0);
 -webkit-transform: scaleY(0);
 transform: scaleY(0);
}
}
 @-webkit-keyframes hideAnimation {
 0% {
 -moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
}
 60% {
 -moz-transform: scaleY(0.98);
 -ms-transform: scaleY(0.98);
 -webkit-transform: scaleY(0.98);
 transform: scaleY(0.98);
}
 80% {
 -moz-transform: scaleY(1.02);
 -ms-transform: scaleY(1.02);
 -webkit-transform: scaleY(1.02);
 transform: scaleY(1.02);
}
 100% {
 -moz-transform: scaleY(0);
 -ms-transform: scaleY(0);
 -webkit-transform: scaleY(0);
 transform: scaleY(0);
}
}
</style>
<div class="container-kazerun">
  <ul>
    <li class="dropdown-kazerun">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown-kazerun">لوازم التحریر</a>
      <ul class="dropdown-menu-kazerun">
        <li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">کتاب</a></li>
        <li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/star-alt-icon.png" /></i><a href="#">دفتر</a></li>
        <li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">مداد</a></li>
        <li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/star-alt-icon.png" /></i><a href="#">پاک کن</a></li>
      </ul>
    </li>
    <li class="dropdown-kazerun">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown-kazerun">تست</a>
      <ul class="dropdown-menu-kazerun">
        <li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۱</a></li>
        <li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۲</a></li>
        <li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۳</a></li>
        <li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۴</a></li>
      </ul>
  </ul>
</div> 

اگه درست متوجه شده باشم

screenshot-{domain}-{date}-{time}.png

[سیدرضا بازیار]

کاملا درسته و زیبا شده
اما دو تا مشکل هست:
۱- این روش کمی کد رو سنگین نمیکنه؟ روش جدیدتر وجود نداره؟
۲- قرار دادن دوباره لینک روی تصویر جالب نیست. دوباره کاری میشه

یه جورایی میخوام به صورت بک گراند در کنارش قرار بگیره

[m2n]

دقیق نگفتین، برای این مورد می تونید یا به تگ a خودتون کلاس تعریف کنید. اگر هم موقعیت به ترتیب تغییر نمی کنه می تونید از خاصیت child استفاده کنید.

[سیدرضا بازیار]

دقیق نگفتین، برای این مورد می تونید یا به تگ a خودتون کلاس تعریف کنید. اگر هم موقعیت به ترتیب تغییر نمی کنه می تونید از خاصیت child استفاده کنید.

تصاویر تغییر میکنه. پس بک گراند یکم دردسر داره

الان اگه بخواید یه لینک بهش بدید که تصویر هم همراه با متن لینک دار بشه چیکار میکنید؟

[m2n]

<li><a href="#"><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i>کتاب</a></li> 

کافیه <i></i> بکشید داخل تگ a