在文本前显示内联图标

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"]

这是网站 >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 添加图像在此之后，您需要相应地增加 span class 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>

这是它的样子：

在文本前显示内联图标

Display inline icon before text

css

shortcode