I would like to modify the look of my web part so there is an image next to the text - this is an example of a search box I have with how I would like the end result to look -

enter image description here

I can modify the text easy enough by applying css on the web part zone property but I can't seem to add an image, has anyone ever done this before?

I did think of creating a CEWP above the web part, setting the web part chrome state to 'None' and then I could just build something but that seems a cheap way out, also I have more web parts, I would hate to have to place a CEWP above every one.

1 Answer 1


You can try something like this for example:

/*here I am setting a background image for the webpart title:*/
    .ms-webpart-chrome-title {
      vertical-align: middle;
      position: relative;
      margin-bottom: 2px;
      background-image: url(your iamge location);
      background-repeat: no-repeat;

You can also use Font awesome icons as well to show icons next to/before title text example:

/*make sure that the font awesome style sheet is loaded first*/
div#WebPartWPQ4_ChromeTitle:before {
  content: '\f098';
  font-family: fontawesome;
  • Thank you for the quick response, this did the trick. Also appricate the added info - looking at placing font awesome items in so this will help even more
    – Jamie_lee
    Commented Nov 3, 2015 at 16:48
  • No worries mate!.
    – HarryB
    Commented Nov 3, 2015 at 16:50
  • I cannot get this to work :/
    – surfnode
    Commented Feb 21, 2018 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.