Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-3613

Magnolia page-editor.css conflicts with website css / font-awesome

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 5.4
    • Fix Version/s: 5.4.3
    • Component/s: page editor
    • Labels:
    • Sprint:
      Basel 13
    • Story Points:
      1
    • Magnolia Release:
      5.4.3

      Description

      Magnolia's page-editor.css, line 35:

      [class^="icon-"], [class*=" icon-"] {
        font-family: MagnoliaIcons !important;
      

      conflicts with website designs that use font-awesome, such as the popular
      Unify bootstrap template.

      In preview mode, the website icons are swapped with others incorrectly, while the published site shows the icons correctly.

      Screenshots attached.

      Recommended solution: change the Magnolia CSS

      ([class^="icon-"], [class*=" icon-"])

      to

      ".mgnlEditorBar [class^="icon-"], .mgnlEditorBar [class*=" icon-"]"

      so that it's explictly just affecting the magnolia bar, not all icons on the page.

      Wrong icons in preview mode:

      Correct icons in published mode:

        Attachments

        1. close-icon.png
          close-icon.png
          264 kB
        2. correct-icons.png
          correct-icons.png
          70 kB
        3. magnolia-ui-admincentral-5.4.jar
          2.05 MB
        4. page-editor.css
          17 kB
        5. why-important-is-important.png
          why-important-is-important.png
          108 kB
        6. wrong-icons.png
          wrong-icons.png
          159 kB

          Activity

            People

            Assignee:
            mgeljic Mikaël Geljić
            Reporter:
            mathiaslin Mathias Conradt
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Date of First Response:

                Time Tracking

                Estimated:
                Original Estimate - 3h Original Estimate - 3h
                3h
                Remaining:
                Remaining Estimate - 0d
                0d
                Logged:
                Time Spent - 7.5h
                7.5h