Recent
Categories
View Replies (8)

Icons Pixeden disappearing when willing to change font type.

  1. Issue
0
Votes
Undo
  1. put.dirk@icloud.com
    put.dirk@icloud.com
  3. Site Showcase
  4. Monday, 31 May 2021
  5.  Subscribe via email
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




Screenshot 2021-05-31 at 15.45.26_Firefox_CSS_Coding.png Screenshot 2021-05-31 at 15.43.42_Safari_CSS_CODING.png Screenshot 2021-05-31 at 15.41.31_Custom_CSS.png Screenshot 2021-05-31 at 15.45.26_Firefox_CSS_Coding.png Screenshot 2021-05-31 at 15.43.42_Safari_CSS_CODING.png Screenshot 2021-05-31 at 15.41.31_Custom_CSS.png Screenshot 2021-05-31 at 15.41.31_Custom_CSS.png Screenshot 2021-05-31 at 15.39.21_Head_Section.png Screenshot 2021-05-31 at 15.37.29_Firefox.png Screenshot 2021-05-31 at 15.37.09_Opera.png Screenshot 2021-05-31 at 15.36.41_Safari.png
Attachments (7)
Screenshot 2021-05-31 at 15.45.26_Firefox_CSS_Coding.png Screenshot 2021-05-31 at 15.45.26_Firefox_CSS_Coding.png
Screenshot 2021-05-31 at 15.43.42_Safari_CSS_CODING.png Screenshot 2021-05-31 at 15.43.42_Safari_CSS_CODING.png
Screenshot 2021-05-31 at 15.41.31_Custom_CSS.png Screenshot 2021-05-31 at 15.41.31_Custom_CSS.png
Screenshot 2021-05-31 at 15.39.21_Head_Section.png Screenshot 2021-05-31 at 15.39.21_Head_Section.png
Screenshot 2021-05-31 at 15.37.29_Firefox.png Screenshot 2021-05-31 at 15.37.29_Firefox.png
Screenshot 2021-05-31 at 15.37.09_Opera.png Screenshot 2021-05-31 at 15.37.09_Opera.png
Screenshot 2021-05-31 at 15.36.41_Safari.png Screenshot 2021-05-31 at 15.36.41_Safari.png
Responses (8)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of this issue?

Ciaran
  1. more than a month ago
  2. Site Showcase
  3. # 1
put.dirk@icloud.com
put.dirk@icloud.com
Accepted Answer Pending Moderation
0
Votes
Undo
Dear,

Yes the URL is

http://sji-basisschool.be

Kind regards
  1. more than a month ago
  2. Site Showcase
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

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
  1. more than a month ago
  2. Site Showcase
  3. # 3
put.dirk@icloud.com
put.dirk@icloud.com
Accepted Answer Pending Moderation
0
Votes
Undo
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
Screenshot 2021-06-07 at 11.10.17.png Screenshot 2021-06-07 at 11.10.11.png Screenshot 2021-06-07 at 11.09.49.png
Attachments (3)
Screenshot 2021-06-07 at 11.10.17.png Screenshot 2021-06-07 at 11.10.17.png
Screenshot 2021-06-07 at 11.10.11.png Screenshot 2021-06-07 at 11.10.11.png
Screenshot 2021-06-07 at 11.09.49.png Screenshot 2021-06-07 at 11.09.49.png
  1. more than a month ago
  2. Site Showcase
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Site Showcase
  3. # 5
put.dirk@icloud.com
put.dirk@icloud.com
Accepted Answer Pending Moderation
0
Votes
Undo
Dear,

Thank you for the quick answer. The information has been sent to you via mail.

Kind regards

Dirk Put
  1. more than a month ago
  2. Site Showcase
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

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
  1. more than a month ago
  2. Site Showcase
  3. # 7
put.dirk@icloud.com
put.dirk@icloud.com
Accepted Answer Pending Moderation
0
Votes
Undo
Dear,

Thank you very much!
It is indeed working.

Kind regards

Dirk Put
  1. more than a month ago
  2. Site Showcase
  3. # 8
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!