Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4939

zk built-in icons have inconsistent size by default


    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 9.6.0
    • 8.5.0,
    • None
    • None

      Steps to Reproduce

      1. run the zul

      Current Result

      some icons have different size from others by default

      z-icon-times-circle, z-icon-close

      Expected Result

      all icons have the same size by default

      Debug Information

      • use case: when an app developer uses z-icon-check-circle and z-icon-times-circle to show validation pass or failure. The size difference between 2 icons make app developers inconvenient because they have to adjust css to make icons the same size. But the benefit to include font awesome is to give developers convenience. Hence, this inconsistent size weakens this benefit.
      • I set a larger font size in order to make the size difference obviously.
      • the root cause is ZK85Icons under iceblue, breeze don't have this bug
        [class^="z-icon-"], [class*=" z-icon-"] {
            font-family: ZK85Icons, FontAwesome;
      • these icons have the same size in Font Awesome, application developers will expect the same size as well.


      override all icon with font-family: FontAwesome;

        1. default.jpg
          10 kB
        2. differentSize.jpg
          10 kB
        3. zk-4939.zul
          0.4 kB

            katherinelin katherinelin
            hawk hawk
            0 Vote for this issue
            3 Start watching this issue