• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer

❤ OrganicWeb

Australian Mailchimp Training Partners

  • Home
  • Services
    • Mailchimp Public Classes
      • Adelaide
      • Auckland
      • Brisbane
      • Melbourne
      • Online
      • Perth
      • Singapore
      • Sydney
      • Wellington
    • Mailchimp Corporate Training
    • Mailchimp Consulting
  • Blog
  • Contact & About
You are here: Home / WordPress / How to add an image automatically before text

How to add an image automatically before text

September 4, 2012 by Gary Leave a Comment

On your WordPress Website, have you ever wanted a specific image to appear before text automatically. Fortunately this is really simple with some basic CSS. 

For example, when I Post from the WordPress for Android App, a line of text appears below the Post content with the words ‘Posted from WordPress for Android’:

This is what the text looks like when posting from the WordPress for Android App

But what if I want to add the Android logo (or any other image) before the line of text so that the ‘Posted from WordPress for Android’ now looks like that below?

Shows the logo before the content by using the CSS pseudo element

Using :before CSS in WordPress

All we need do to show any image before a CSS element is use the :before pseudo-element (for CSS3 you’ll use the ::before pseudo-element). Here are the instructions:

  1. Identify the CSS element (e.g. the class or ID).
  2. Insert the following into your style.css using a text editor (substitute .class for your css element and add the link you your image required to show before the content): .class:before {
     content:url(https://example.com/wp−content/uploads/android−logo−2012.png);
    padding−right:6px;
    }
  3. Save the changes to style.css

That’s all. Your image will now show wherever the element is shown on your Website.

Found this useful? Please share:

  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • More
  • Click to email this to a friend (Opens in new window)

Related

Filed Under: WordPress Tagged With: android, CSS, css3, how to, instructions, WordPress

Contact Gary now

Email: [email protected] Telephone: (+61) 04 1092 3445

Gary from OrganicWeb
  • This field is for validation purposes and should be left unchanged.

What our clients have to say

Gary totally blew my mind with the possibilities available & how they can work for my business specifically."
Kim, Brisbane
Great facilitator and ensured the whole class was happy and competent at the end of the session."
Natalie, Sydney
Don't waste time looking anywhere else - contact Gary today, you won't be disappointed."
Evelyne, Sydney
He is knowledgeable and gifted on the in's and out's of Mailchimp and email campaigns. I highly recommend him! He will make your efforts count!"
Fred, Melbourne
I highly recommend anyone seeking information on how to use Mailchimp to attend one of Gary's expert workshops."
Beverley, Gold Coast
I was constantly updated by email with progress of the work, which was completed to my total satisfaction. Highly recommendable company."
Harry, London

Learn Mailchimp

Attend one of our classes and learn the tips and tricks to incredible results using Mailchimp
Learn More

Leave a Reply Cancel reply

Want Mailchimp Training?

Gary now offers his Mailchimp class online. Learn from a Mailchimp Partner

Learn Mailchimp

Australian Mailchimp Partners

What our clients say

"Gary was awesome! He has a fantastic way of making everything rather simple and straightforward. I definitely left with a lot more knowledge, confidence and ideas than when I walked in. Thanks Gary!" Fiona

View our reviews on Google

Australian Mailchimp Classes

Want to learn Mailchimp?

See Dates

Meet Gary, Mailchimp Expert

Gary Eckstein is listed by Mailchimp as an Expert.

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event.

Contact Gary for your Mailchimp needs

READY TO GET STARTED?

Contact Gary today to get started with Mailchimp consulting, training or integrations.

Get in touch!

Copyright © 2019 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.