• Resolved bender174

    (@bender174)


    I can’t figure out how to add a custom image as the icon for a service. I read in the documentation.

    You can also add an image which will get a parallax effect, as you can for most of the section types. Just make sure you upload a big enough image to look good.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The paragraph refers to the background image of the section. You cannot replace icons with images, but you can simply not set an icon and use an image inside your service.

    I used this to implement acustom icon “funkdiag” as though it were font-awesome:

    .fa.funkdiag:before { /*should be font-size in .service-icon*/
        content: url('/wp-content/uploads/2014/11/.....png');
    }
    
    .service-icon {
    font-size: 80px;
    width:100px;
    height:100px;
    }

    so you’ll choose “funkdiag” as the icon when you create the service in the backend.

    I used this to add a custom background image to a text widget in my case (should be adaptable to every other widget)

    #appointment {
     padding-bottom: 50px !important;
    	display: block;
    	background: url(/wp-content/uploads/2014/11/terminvereinbarung-w.jpg) no-repeat;
    	background-position: center top;
    	background-attachment: fixed;
    	background-size: cover;
    	z-index: -1;
    }

    Where the text widget contains this:

    <section id="appointment" class="appointment-area"><div class="container">
    <h3 class="widget-title">TITLE</h3>
    <div class="textwidget">
    CONTENTCONTENTCONTENT
    </div></div></section>

    For the background I had to remove surrounding text-widget-specific tags using this js:

    jQuery(document).ready(function($){
    var c = document.getElementById('appointment');
    $(c.parentNode.parentNode).replaceWith(function() { return c; });
    });

    Good luck!

    Not sure there is much use for your second and third blocks of code. You can set a background image for any row using row styles. And adding a container class inside the text widget also isn’t very useful since there is already a container class wrapping it and applying the proper width. But it’s late so I might be missing something ??

    that is awesome! I had still been on 1.12, this gives me reason to update.

    hmm. This way of doing it doesn’t seem to parallax the text widget background.

    Also, the update breaks my (modified) stuck navbar and content of a text widget (also somewhat css tweaked) seems to have width 100% which doesn’t look nice, I’d have to spend more time on this. I think I’ll just not touch this running system albeit unclean

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Use custom image for service icon’ is closed to new replies.