Toggles char and size

[hidroxid]

Hello

In the Toggles I want to change the icon that is shown as open and closed.

Additionally, in Simple Toggles, I would like to reduce the size of the box (and the icon) that shows the plus and minus, depending on whether it is opened or closed.

Regards

---

Template Version: 8.3.0

[Support]

Hello,

To change the icon for the Simple Toggles:

(css/custom.css):

/* Toggle expanded */
.toggle.toggle-simple .toggle.active>label:before, .toggle.toggle-simple .toggle.active>.toggle-title:before {
    content: "\f068";
}

/* Toggle Collapsed */
.toggle.toggle-simple .toggle>label:before, .toggle.toggle-simple .toggle>.toggle-title:before {
    content: "\f067";
}

* These “content” values you can get in the https://fontawesome.com/ website. Look for the desired icon and get the code.

To reduce the size:
(css/custom.css):

/* The blue square */
.toggle.toggle-simple .toggle>label:after, .toggle.toggle-simple .toggle>.toggle-title:after {
    width: 18px;
    height: 18px;
}

/* Reduce icon font size */
.toggle.toggle-simple .toggle>label:before, .toggle.toggle-simple .toggle>.toggle-title:before {
    font-size: 5px;
}

Hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[hidroxid]

Hello

Ok, the font size was reduced, but the box around it still the same size.

How can i reduce it too?

Thanks

---

[hidroxid]

See the image please: Example

---

[Support]

Hello,

Please try adding the !important flag at the CSS:

/* The blue square */
.toggle.toggle-simple .toggle>label:after, .toggle.toggle-simple .toggle>.toggle-title:after {
    width: 18px !important;
    height: 18px !important;
}

Clear your browser cache if you are running in a local server like Apache or Nginx.

Hope this helps!

kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[hidroxid]

Hello.

Good, but now how can i move the icon inside the blue square or center it? When i reduce the font size and the square, the icon is moved to right.

---

[Support]

Hello,

You can move with top and left values:

/* Reduce icon font size */
.toggle.toggle-simple .toggle>label:before, .toggle.toggle-simple .toggle>.toggle-title:before {
    top: 5px;
    left: 7px;
    font-size: 5px;
}

* Play with the values to see what fits better with your design.

Hope this helps!

kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[hidroxid]

Superb!

A big thanks!

---

[Author]

Posts