Icons Pixeden disappearing when willing to change font type.
There was a solution implemented on our site sji-basisschool.be to use the Pixeden icons in a submenu.
We have changed the font type.
In the head section we have implemented next mentioned code. A printout can be found in the uploaded attachments with extension head_section.
<link rel="stylesheet" href="images/pe-icon-7-stroke/css/pe-icon-7-stroke.css">
<!-- Optional - Adds useful class to manipulate icon font display -->
<link rel="stylesheet" href="images/pe-icon-7-stroke/css/helper.css">
Also in the custom CSS code we have implemented next mentioned CSS code:
[class^="pe-7s-"], [class*=" pe-7s-"] {
font-family: 'Pe-icon-7-stroke' !important;
}
Also see the included attachment file with extension custom_css
The font type in the menu is different in different browsers.
Safari: Showing the correct one
Opera: Showing the wrong one
Firefox: Showing the wrong one
We would like to use the Helvetica font type. But when implemented nothing changes.
1. See attached file with suffix safari_css_coding
2. See attached fiorefox with suffix firefox_css_coding
The font type always remains 'Pe-icon-7-stroke' !important;
I don't know why in safari is is displayed differently.
I know that in the custom CSS Coded we have addressed
[class^="pe-7s-"], [class*=" pe-7s-"] {
font-family: 'Pe-icon-7-stroke' !important;
}
But how can we address the text font from a menu after the icon?
Can you please help us with this one?
Thanks in advance.
Kind regards
Dirk Put
- put.dirk@icloud.com
-
- Site Showcase
- Monday, 31 May 2021
- Subscribe via email
Thank you
To amend try replacing your font-family CSS with the following...
The icon is only in the pseudo-class (::before), so targeting that alone should not affect the text.
Ciaran
To amend try replacing your font-family CSS with the following...
[class^="pe-7s-"]::before,
[class*=" pe-7s-"]::before {
font-family: 'Pe-icon-7-stroke';
}
The icon is only in the pseudo-class (::before), so targeting that alone should not affect the text.
Ciaran
- more than a month ago
- Site Showcase
- # 3
Dear
I have indeed tried this and that is the problem we have indeed.
When changing the code to :
[class^="pe-7s-"]::before,
[class*=" pe-7s-"]::before {
font-family: 'Pe-icon-7-stroke';
}
And than adapting the font to
[class^="pe-7s-"]::before,
[class*=" pe-7s-"]::before {
font-family: 'Helvetica';
}
The result is that all the icons are disappearing in the menu and in the sub-menu.
I have included the result in the attached file.
Can you please advice what can be done?
Thanks in advance.
Kind regards
Dirk Put
I have indeed tried this and that is the problem we have indeed.
When changing the code to :
[class^="pe-7s-"]::before,
[class*=" pe-7s-"]::before {
font-family: 'Pe-icon-7-stroke';
}
And than adapting the font to
[class^="pe-7s-"]::before,
[class*=" pe-7s-"]::before {
font-family: 'Helvetica';
}
The result is that all the icons are disappearing in the menu and in the sub-menu.
I have included the result in the attached file.
Can you please advice what can be done?
Thanks in advance.
Kind regards
Dirk Put
- more than a month ago
- Site Showcase
- # 4
Hi Dirk
May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.
Ciaran
May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.
Ciaran
- more than a month ago
- Site Showcase
- # 5
Dear,
Thank you for the quick answer. The information has been sent to you via mail.
Kind regards
Dirk Put
Thank you for the quick answer. The information has been sent to you via mail.
Kind regards
Dirk Put
- more than a month ago
- Site Showcase
- # 6
Thank you
THis issue should be now resolved with the following custom CSS...
Ciaran
THis issue should be now resolved with the following custom CSS...
.hornav [class^="pe-7s-"],
.hornav [class*=" pe-7s-"]{
font-family: Helvetica;
}
[class^="pe-7s-"]:before,
[class*=" pe-7s-"]:before {
font-family: 'Pe-icon-7-stroke';
}
Ciaran
- more than a month ago
- Site Showcase
- # 7
- Page :
- 1
There are no replies made for this post yet.
Be one of the first to reply to this post!
Be one of the first to reply to this post!
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here. Register Here »