Public Forums 71,145 posts

[rafghost2 Friend rafghost2Join date: May 2014Posts: 13Downloads:0Uploads:1 Thanks: 4]

#199018

Hi to all,

I would like to change the icon of the off-canvas menu, how can I do it?

It’s possible to invert the position of the logo with the position of the off-canvas menu?

Thanks

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#539669

So that we can try to best assist you, please provide the url of the site you’re working on.

1 user says Thank You to TomC for this useful post

1. gamboolian

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#539681

Go to this File: templatespurity_iiitplsblocksoff-canvas.php

this is where you need to change the icon

<button class="btn btn-default off-canvas-toggle <?php $this->_c('off-canvas') ?>" type="button" data-pos="left" data-nav="#t3-off-canvas" data-effect="<?php echo $this->getParam('addon_offcanvas_effect', 'off-canvas-effect-4') ?>">
<i class="fa fa-bars"></i>
</button>

1 user says Thank You to chavan for this useful post

1. gamboolian

[rafghost2 Friend rafghost2Join date: May 2014Posts: 13Downloads:0Uploads:1 Thanks: 4]

#539699

The URL of my website is: lasorgentediluceamore.com

Chavan: the icon name is the fa fa-bars, what should I put in place of that to view the icon I choose?

Thanks

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#539704

@rafghost2

yes add any icons in this list http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

1 user says Thank You to chavan for this useful post

1. gamboolian

[rafghost2 Friend rafghost2Join date: May 2014Posts: 13Downloads:0Uploads:1 Thanks: 4]

#539723

It’s not possible to add other icons except those? For example icon I downloaded?

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#539892

Instead of this code

<i class="fa fa-bars"></i>

add an img code or remove fa fa-bars in above code and add this css

.off-canvas-toggle i {
background: url('../images/image.png') no-repeat left top;
}

Give a Try

1 user says Thank You to chavan for this useful post

1. gamboolian

[rafghost2 Friend rafghost2Join date: May 2014Posts: 13Downloads:0Uploads:1 Thanks: 4]

#540417

I have to insert the second code between the “…” instead of fa fa-bars?

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#540432

can you please post your site Url, admin details in PM and the Image you need instead of the canvas icon. I will do that for you.

1 user says Thank You to chavan for this useful post

1. gamboolian

[rafghost2 Friend rafghost2Join date: May 2014Posts: 13Downloads:0Uploads:1 Thanks: 4]

#540456

The url is: http://www.lasorgentediluceamore.com
This is the image I would like to insert

Can you explain me how to change it after you did it. So next time I can do it alone?

Thanks

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#540722

Go to this File: templates/purity_iii/css/off-canvas.css

Add this code:


.off-canvas-toggle i{
background: url("yourimagepath") no-repeat left top;
width:15px;
height:15px;
}

.off-canvas-toggle i:before{
content:"" !important;
}

[rafghost2 Friend rafghost2Join date: May 2014Posts: 13Downloads:0Uploads:1 Thanks: 4]

#540764

there is already a line:

.off-canvas-toggle…

Should I erase it?

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#540804

No just add those code

[Author]

Posts