Announcement

Collapse
No announcement yet.

New icon pack

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • New icon pack

    Сan be using this (https://icons8.com/line-awesome) icon set. Looks better and does not require investment for implementation.
    There is an auto transition from awesome
    Attached Files

  • #2
    > Looks better

    I think it's a matter of taste. I don't find fontawesome worse.

    Comment


    • dimyy
      dimyy commented
      Editing a comment
      Standard awesome has no telegram whatsapp and other icons. Only in payed version

  • #3
    А как начать использовать?

    Comment


    • dimyy
      dimyy commented
      Editing a comment
      Simplest way, but less security:

      /custom/Espo/Custom/Resources/metadata/app/client.json
      {
      "cssList": [
      "https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css"
      ]
      }


      more security and other config options: download pack and use

  • #4
    Perhaps feature request for ability to use custom icon pack would be more fitting than locking it down to just 'line-awesome' pack.

    Comment


    • dimyy
      dimyy commented
      Editing a comment
      You can use custom icon pack now.

      For the entity, write the iconClass property and all work fine.

    • yuri
      yuri commented
      Editing a comment
      As long they are compatible. n=2 is not much of choice.

    • dimyy
      dimyy commented
      Editing a comment
      My answer is for @espcrm

      For example:

      Download original line awesome (or any other iconfont which use
      Code:
      class="icon"
      structure)
      Add css (custom\app\client.json)
      Change iconClass to "las la-american-sign-language-interpreting" in the clientDefs\applicableEntity.json

      All work fine (except modifying icon in the entity editor).

  • #5
    Custom SVG icon for entity

    CSS:
    client/custom/css/customIcon.css
    Code:
    .customIcon:before{
        content: '';
       background:url('/client/custom/img/mushroom.svg');
       width: 20px/* width of the image */;
       height: 20px/* height of the image */;
       display: block;
    }
    app\client.json
    Code:
    {
       "cssList": [
          "__APPEND__",
          "client/custom/css/customIcon.css"
        ]
    }
    clientDefs\entity.json or config.php for multilevel menu
    Code:
          'iconClass' => 'customIcon'
    Attached Files
    Last edited by dimyy; 08-23-2021, 04:41 AM.

    Comment


    • #6
      Did you tweak css to make icons larger? I tried and all icons are too small. We have 16px in Espo set for icons. I tried 24px and it's too large. I think having the value in the middle will make icons not smooth.

      Comment


      • yuri
        yuri commented
        Editing a comment
        I believe to make it look good we would need to make a lot of changes in UI, adjusting height of lot of elements to fit 24px icon.

      • dimyy
        dimyy commented
        Editing a comment
        I make little tweak:

        Code:
        .fa, .fab, .fad, .fal, .far, .fas {
            font-size: 1.25em;
        }
        
        #navbar .fa, #navbar .fab, #navbar .fad, #navbar .fal, #navbar .far, #navbar .fas {
            font-size: 1.75em;
        }
        Adjusting all icons to 24 px is realy lot of changes
    Working...
    X