Add Text before Icon

[Rahim]

Hi Harry,
Hope you are fine.

How can I add the text Filter before the filter icon on archive pages?

Check here: https://prnt.sc/u5fl1n

Regards

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

thank you i’m fine.

Please add below code to Custom CSS

.filter-trigger::before {
	content: 'Filter';
	padding-right: 10px;
	font-size: 18px;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,
I’m happy you are fine. 🙂

Harry this is my final code:

.filter-trigger::after {
content: 'فیلتر';
padding-right: 10px;
font-size: 18px;
vertical-align: text-top;
}

You can check it here: https://look.ir/women-clothing/

Is there any way to add a border to this section?
Something like product listing method? https://prnt.sc/u62mne

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

Hi Harry,
I did it myself.

Final code:

.filter-trigger::after {
content: 'فیلتر';
padding-right: 10px;
font-size: 18px;
vertical-align: 2px;
}
.filter-trigger {
border: 1px solid #ddd;
padding: 0 20px;
}

Check here: https://look.ir/women-clothing/

Is it all right in your opinion?

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

I see it better with black background and white text like you do it now.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,
Hope you are fine. 🙂

Harry, why is this happening on some mobile devices? https://prnt.sc/u8ikf1

How can I fix the Filter word, next to the icon?

Regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

I check on my phone it work well now. Did you fix it?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

It’s fine on some mobiles and it’s not on the others.

The screenshot that I sent you comes from a big screen xiaomi phone.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please add below code

.filter-trigger {margin-left: 20px;}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts