e107inc / e107

e107 Bootstrap CMS (Content Management System) v2 with PHP, MySQL, HTML5, jQuery and Twitter Bootstrap. Issue Discussion Room: https://gitter.im/e107inc/e107
https://e107.org
GNU General Public License v3.0
320 stars 213 forks source link

Theme glyph with the same name as FA5 icon is wrong #4498

Closed Jimmi08 closed 9 months ago

Jimmi08 commented 3 years ago

Bug Description

Some theme icons have wrong markup

I am using theme glyphs () It is loaded correctly, just some icons are not displayed.

Look - correct icon has code iconsminds iconsminds-home-1 and it is displayed. But next one has code iconsminds fa-medal

image

I think that it is because "medal" is icon for fontawesome too.

Css file is correctly parsed: (result after e107::getMedia()->getGlyphs() )

[798] => iconsminds-medal

Items for media manager: This one is from FA5:

    [960] => Array
        (
            [previewHtml] => <i class='fas fa-medal' ><!-- --></i> 
            [previewUrl] => fas fa-medal
            [saveValue] => fas-medal.glyph
            [thumbUrl] => fas-medal
            [title] => FA5 fa-medal
            [slideCaption] => Font-Awesome 5 (solid)
            [slideCategory] => font-awesome
        )

and this one is from theme:

    [2314] => Array
        (
            [previewHtml] => <i class='fas fa-medal' ><!-- --></i> 
            [previewUrl] => iconsminds iconsminds-medal
            [saveValue] => iconsminds-medal.glyph
            [thumbUrl] => iconsminds-medal
            [title] => iconsminds-medal
            [slideCaption] => Iconsminds
            [slideCategory] => iconsminds
        )

But other icons from the same css look like this:

    [2313] => Array
        (
            [previewHtml] => <i class='glyphicon glyphicon-iconsminds iconsminds-life-jacket' ><!-- --></i> 
            [previewUrl] => iconsminds iconsminds-life-jacket
            [saveValue] => iconsminds-life-jacket.glyph
            [thumbUrl] => iconsminds-life-jacket
            [title] => iconsminds-life-jacket
            [slideCaption] => Iconsminds
            [slideCategory] => iconsminds
        )

Glyph config is correct:

Array
(
    [name] => iconsminds
    [pattern] => \.(iconsminds-[a-z-0-9]*):before\ {
    [path] => ../e107_themes/flatkit/font/iconsmind-s/css/iconsminds.css
    [class] => iconsminds
    [prefix] => iconsminds-
    [tag] => i
)

I wasn't able to point where the problem lies, but it looks like in the toGlyph() parser. Each custom icon with the same name as FA5 has the wrong prefix.

Thanks

Jimmi08 commented 2 years ago

This is stull issue.
lni-archive is replaced with fa-archive because it is FA icon lni-arrow-down-circle has custom icon name, so it works

Result:

image

Array
(
    [previewHtml] => <i class='lni fa-archive' ></i> 
    [previewUrl] => lni lni-archive
    [saveValue] => lni-archive.glyph
    [thumbUrl] => lni-archive
    [title] => lni-archive
    [slideCaption] => Lineicons
    [slideCategory] => lineicons
    [width] => 32
    [height] => 32
    [id] => 
    [tagid] => 
    [type] => glyph
    [bbcode] => glyph
    [gridClass] => media-carousel-item-glyph pull-left icon-preview
)

Array
(
    [previewHtml] => <i class='lni lni lni-arrow-down-circle' ></i> 
    [previewUrl] => lni lni-arrow-down-circle
    [saveValue] => lni-arrow-down-circle.glyph
    [thumbUrl] => lni-arrow-down-circle
    [title] => lni-arrow-down-circle
    [slideCaption] => Lineicons
    [slideCategory] => lineicons
    [width] => 32
    [height] => 32
    [id] => 
    [tagid] => 
    [type] => glyph
    [bbcode] => glyph
    [gridClass] => media-carousel-item-glyph pull-left icon-preview
)
    <glyphicons>
        <glyph name='lineicons' pattern='\.(lni-[a-z-]*)::before\{'  path='assets/css/lineicons.min.css' class='lni' prefix='lni' tag='i' />
    </glyphicons>

Maybe related: https://github.com/e107inc/e107/issues/4798

Jimmi08 commented 2 years ago

I was able to narrow problem to toGlyph();

this is correct: list($id) = explode('.glyph', $text, 2); // trim .glyph from the end. id has value lni lni-amazon

then you get $code for icon: $code = str_replace($tmp . '-', '', $id); and it is amazon. But because it is fontawesome icon, $id is changed.

Only after this you check if this is custom icon, but $id is already changed.

So then there is wrong ouput: $text = '<' . $tag . " {$idAtt}class='" . $class . $prefix . $id . $size . $spin . $rotate . $fixedW . "' " . $style . $title . '>' . $placeholder . '</' . $tag . '>';

I tested this: image

And result image