?
avatar jvdh20
jvdh20
24 Aug 2015

Steps to reproduce the issue

1) make a template and add:
JHtml::('bootstrap.framework');
JHtml::
('bootstrap.loadcss');
to enable bootstrap in your template.

2) Add a "Login" module for the frontpage.

3) Besure that the "Two Factor Authentication" plugins are enabled.

4) Visit your frontpage and be sure that you see the login module with the "Secret Key" field.

5) After the "Secret key" there is a span with the class "icon-help"

Expected result

The span with class "icon-help" should show a help icon.

Actual result

But it doesn't show an icon.
IF I CHANGE
class "icon-help"
ON LINE 72 AND 79 IN
modules\mod_login\tmpl\default.php
TO
class "icon-question-sign"
IT WORKS AGAIN

System information (as much as possible)

Joomla 3.4.3

Additional comments

See attachments for printscreens before and after fix.screen shot 2015-08-24 at 14 22 26

avatar jvdh20 jvdh20 - open - 24 Aug 2015
avatar jvdh20 jvdh20 - change - 24 Aug 2015
The description was changed
avatar jvdh20 jvdh20 - change - 25 Aug 2015
The description was changed
avatar infograf768
infograf768 - comment - 25 Aug 2015

The class exists in Protostar:

.icon-question:before,
.icon-question-sign:before,
.icon-help:before {
    content: "\45";
}

screen shot 2015-08-25 at 12 56 11

avatar jvdh20
jvdh20 - comment - 25 Aug 2015

It's very strange.
I haven't changed anything else in the Joomla core files.
But if I use class "icon-question-sign" it works in my template.
If I use class "icon-question" or "icon-help" it doesn't work in my template.

I found out that when I add the following CSS to my template it works.
But why should I have to add this CSS to my template?
The other icons with class "icon-user", "icon-lock" and "icon-star" work by default without adding any CSS.

@font-face {
font-family: 'IcoMoon';
src: url('../../../media/jui/fonts/IcoMoon.eot');
src: url('../../../media/jui/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('../../../media/jui/fonts/IcoMoon.woff') format('woff'), url('../../../media/jui/fonts/IcoMoon.ttf') format('truetype'), url('../../../media/jui/fonts/IcoMoon.svg#IcoMoon') format('svg');
font-weight: normal;
font-style: normal;
}

[class*=" icon-"]:before {
font-family: 'IcoMoon';
font-style: normal;
speak: none;
}
.icon-question:before,
.icon-question-sign:before,
.icon-help:before {
content: "\45";
}

avatar mbabker
mbabker - comment - 25 Aug 2015

The core templates are compiled with the IcoMoon font set which includes some extra class names beyond Bootstrap's Glyphicons and some custom class names (to map to other icons). So if you're using a template that doesn't include those icons or classes, it makes sense why things aren't quite displaying as you're expecting immediately.

avatar jvdh20
jvdh20 - comment - 25 Aug 2015

Then It would be better that Joomla should only use the Bootstrap Glyphicons and not in some cases the IcoMoon font set or otherwise if Bootstrap is loaded also load the IcoMoon font set by default to prevent missing icons.

avatar mbabker
mbabker - comment - 25 Aug 2015

If you include the media/jui/css/icomoon.css file in your template then IcoMoon will load. The core templates have the CSS compiled into the main template's CSS file via the LESS files and that standalone CSS file is available as an option to make it easy to load in the extra icons.

The same type of issue would happen if only Glyphicons were in use because we've added several custom class name aliases (and even some icons that aren't available as part of Glyphicons).

avatar Bakual
Bakual - comment - 25 Aug 2015

I'm closing this issue as it's an issue of the template and not the core.

If you don't like the class names used in core, feel free to create a template override to change them so it matches standard bootstrap. However i would rather add the needed CSS to support the present icon class.

avatar Bakual Bakual - change - 25 Aug 2015
Status New Closed
Closed_Date 0000-00-00 00:00:00 2015-08-25 14:09:47
Closed_By Bakual
avatar Bakual Bakual - close - 25 Aug 2015
avatar Bakual Bakual - close - 25 Aug 2015
avatar jvdh20
jvdh20 - comment - 25 Aug 2015

Thanks mbabker but adding media/jui/css/icomoon.css load Glyphicons and IcoMoons on top of each other.
I stay with the solution:

@font-face {
font-family: 'IcoMoon';
src: url('../../../media/jui/fonts/IcoMoon.eot');
src: url('../../../media/jui/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('../../../media/jui/fonts/IcoMoon.woff') format('woff'), url('../../../media/jui/fonts/IcoMoon.ttf') format('truetype'), url('../../../media/jui/fonts/IcoMoon.svg#IcoMoon') format('svg');
font-weight: normal;
font-style: normal;
}

[class*=" icon-"]:before {
font-family: 'IcoMoon';
font-style: normal;
speak: none;
}
.icon-question:before,
.icon-question-sign:before,
.icon-help:before {
content: "\45";
}


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7766.

avatar Bakual
Bakual - comment - 25 Aug 2015

You should probably not use JHtml::('bootstrap.loadcss');. This is a command which we honestly should have never introduced.
You should instead buold your own template CSS from the LESS files. Then you can drop out the Glyphicons and replace them with IcoMoon.

avatar N6REJ
N6REJ - comment - 26 Aug 2015

I really don't understand how there can be a conflict between icomoon
and glyphicon. I don't have any and the class names are nothing alike.
icon- versus glypihicon glyphicon-
Bear
On 8/25/2015 16:12, Thomas Hunziker wrote:

You should probably not use |JHtml::('bootstrap.loadcss');|. This is a
command which we honestly should have never introduced.
You should instead buold your own template CSS from the LESS files.
Then you can drop out the Glyphicons and replace them with IcoMoon.


Reply to this email directly or view it on GitHub
#7766 (comment).

avatar jvdh20
jvdh20 - comment - 26 Aug 2015

The icons before the fields of the login form module are icons with classnames like "icon user", "icon-lock" and "icon-star". Icomoon uses the same classnames. Thats why the icomoon and glyphicon icons appear on top of each.

avatar mbabker
mbabker - comment - 26 Aug 2015

Bootstrap 2.3 uses icon- names. Bootstrap 3 uses glyphicon- names.

avatar jvdh20
jvdh20 - comment - 26 Aug 2015

Thanks mbabker that would solve it when the newest Bootstrap becomes part of the core.


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7766.

avatar Bakual
Bakual - comment - 26 Aug 2015

We can talk about Bootstrap 4 for Joomla 4 :smile:

avatar N6REJ
N6REJ - comment - 26 Aug 2015

@mbabker thanks Michael that explains it.

Add a Comment

Login with GitHub to post a comment