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.


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
    Nov 3 '15 at 16:48
  • No worries mate!.
    – HarryB
    Nov 3 '15 at 16:50
  • I cannot get this to work :/
    – surfnode
    Feb 21 '18 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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