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"
The span with class "icon-help" should show a help icon.
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
Joomla 3.4.3
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";
}
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.
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.
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).
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.
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2015-08-25 14:09:47 |
Closed_By | ⇒ | Bakual |
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";
}
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.
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).
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.
Bootstrap 2.3 uses icon-
names. Bootstrap 3 uses glyphicon-
names.
Thanks mbabker that would solve it when the newest Bootstrap becomes part of the core.
We can talk about Bootstrap 4 for Joomla 4
The class exists in Protostar: