在文本之前显示内联图标

Question

我创建了带有短代码的按钮，我需要在第一个文本之前添加图标，如http://s32.postimg.org/codndv6s5/Bez_n_zvu.jpg

这是短代码

[button iconurl="http://www.yakna.cz/neuroportal/wp-content/themes/cityguide/design/img/child.png"  title="Děti" description="Rozcestník pro děti a mladistvé do 15 let" marginright="0%" width="45%" iconalign="top" textalign="center" align="left" url="http://www.yakna.cz/neuroportal/cat/deti/" bgcolor="#00968f"] [button iconurl="http://www.yakna.cz/neuroportal/wp-content/themes/cityguide/design/img/man.png" title="Dospělí" description="Rozcestník pro dospělé" marginleft="0%" width="45%" iconalign="top" textalign="center" align="right" url="http://www.yakna.cz/neuroportal/cat/dospeli/" bgcolor="#00968f"] [rule type="clear"]

这是网站＆gt; http://www.yakna.cz/neuroportal

我尝试添加css float：left，display：inline-block但没有帮助 请指教，谢谢

Answer 1

此页面可以帮助您：How to align inline image with text?

如果没有，请尝试将floating:left设置为“Dospělí”图标。

Answer 2

我在控制台中使用css，这应该适合你。移除span class icon并使用text和align image in middle vertically直接添加图片。之后，您需要相应地增加跨度类text的顶部填充

    <span class="wrap">
     <span class="text" style="text-align:center;padding-top: 10px;/* display: inline-block; */">
      <span class="title" style="">
            <img src="http://www.yakna.cz/neuroportal/wp-content/themes/cityguide/design/img/child.png" alt="button icon" class="load-finished" style="
        vertical-align: middle;
    "> Děti         </span>
<span class="description" style="">
    Rozcestník pro děti a mladistvé do 15 let</span>
</span></span>

它的外观如下：