html - 如何在 h1 文本旁边放置一个图标？

Question

我想在我的 h1 文本附近的左侧放置一个图标。显示“创意写作”的 h1 是我的目标。我希望图标与 h1“创意写作”对齐。

Jsfiddle:http://jsfiddle.net/g1qtq58y/

HTML:

<section id="main_sectiontwo">
    <h1>Creative Writing</h1>
    <article>
        <header>
            <h1>SESSION I (Writing for the Stage)</h1><br/>
        </header>
        <p>Whether a play or a musical, writing for the stage brings with it a unique set of challenges. Your script must not only have the story but also dialog, stage direction and a general sense of what is possible in a Theatre. Find out from someone who knows how it's done.</p>
        <p>Presenter: Bill Wright</p>
    </article>
</section>

CSS:

#main_sectiontwo article{
width:450px;
}

#main_sectiontwo{
height:1000px;
}

#main_sectiontwo article header{
color:#2754a2;
font-family:helvetica;
}

#main_sectiontwo article p{
font-family:arial;
}

Answer 1

参见 fiddle

编辑了你的fiddle也是

我用过<fieldset>和 <legend>标签

HTML

section id="main_sectiontwo">
<fieldset>
    <legend><h1><img src="yourimage" height="15" width="15"/>Creative Writing</h1></legend>
    <article>
        <header>
            <h1>SESSION I (Writing for the Stage)</h1><br/>
        </header>
            <p>Whether a play or a musical, writing for the stage brings with it a unique set of challenges. Your script must not only have the story but also dialog, stage direction and a general sense of what is possible in a Theatre. Find out from someone who knows how it's done.</p>
            <p>Presenter: Bill Wright</p>
    </article>

    </fieldset>
</section>

CSS

#main_sectiontwo article{
width:450px;
}

#main_sectiontwo{
height:1000px;
}

#main_sectiontwo article header{
color:#2754a2;
font-family:helvetica;
}

#main_sectiontwo article p{
font-family:arial;
}
fieldset{
    border:none;
}

输出