What’s the correct way to get an icon to show up on the same line as some text? (For example: a check-mark icon next to some words)
Here’s how I did it on my home page:
I created a new div here because I had initially styled all of the icons on my site to be the same color. The new div allows me to separately style the icons inside of it .
“Icon-check” is the name of the check-mark icon I want to use. I already have the list of icons installed, so I know their names.
<div id=”mynewdiv”>
<h5>Status: Now Accepting Clients <span class=”icon-check“></span>
</h5>
</div>
SPAN is an in-line element. It’s what puts the icon on the same line as the text. If you want the icon to come before the text, instead of after, just place the span class in front of the text like this:
<div id=”mynewdiv”>
<h5><span class=”icon-check”></span> Status: Now Accepting Clients
</h5>
</div>
Remember to put a space between the span element and your text, so it looks good.
Now style it with some CSS:
#mynewdiv h5 {
padding-top: 30px;
text-align: center;
font-family: Arial, sans-serif;
color: #36e736;
}
Questions?
Other articles you might like:
-How your personal brand makes the difference
-Using images: Tips to improve your SEO rankings
-5 Tips to Stay Sane when Working from Home
About the author
I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.
I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.
I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.
I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.
‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.
Visit Image and Aspect to learn more about your web presence options
Diane M. Metcalf, M.S.
