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

Question

我正试图在我的h1文本附近放置一个图标，在它的左边。 h1表示＆＃34;创意写作＆＃34;是我的目标之一。我希望图标与h1＆＃34;创意写作＆＃34;。

对齐

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;
}

<强>输出

Answer 2

一种方法是将图标作为背景图像添加到h1标签本身，然后添加等于图标宽度的左填充+您希望具有可用性的实际填充。

更具伸缩性的方法是将图标添加到自定义字体文件中，并将元素添加到之前。这将允许缩放矢量图像和图标与文本之间按比例的基于em的填充。

Answer 3

我只是尝试了以下样式，它在chrome中工作。

h1::before{
content: url('https://www.gravatar.com/avatar/be932e44c7d573abccf8bb844c79302d?s=24&d=identicon&r=PG');
}