在文本前显示内联图标答案

【问题标题】：Display inline icon before text在文本前显示内联图标
【发布时间】：2016-05-17 13:35:02
【问题描述】：

我创建了带有简码的按钮，我需要在第一个文本之前添加图标 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"]

这里是网站>http://www.yakna.cz/neuroportal

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

【问题讨论】：

标签： css shortcode

【解决方案1】：

这个页面可以帮助你：How to align inline image with text?

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

【讨论】：

【解决方案2】：

我在控制台中玩过 css，这应该适合你。删除span class icon并直接使用text和align image in middle vertically添加图像之后，您需要相应地增加span类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>

这是它的外观：

【讨论】：

用这个替换<span class="wrap">之间的整个现有代码
我不知道，如果它的短代码可能以其他方式实现，如何更改此 html 行？