The css icon isn't display

Hi all,

I set the icon through css, but it did not show successful. I checked NetWork and found the icon address was not requested

This problem only appears in outsystems.

the css code

@font-face {
  font-family: "iconfont";
  src: url('iconfont.eot?t=1586700421768'); /* IE9 */
  src: url('iconfont.eot?t=1586700421768#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANEAAsAAAAAB1AAAAL3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCFIF7ATYCJAMQCwoABCAFhG0HPxtkBsgekiSEQAEFgKiAgGXEw9d+r+fu7vvZECpEmYkFtOHxxBWytqodX+VrfMcDCf3/z7/8G8hzkk6rKlZl3Hn7spg98yZ2a39WYNEZVVD9UgjNg2Opn+J59vYuGa2RgC/4QFFNtYEMZAPZgHjD2FVLcVC7CXSZFMtqP7e4DBwVeFAgXmSpGRwzDkVRw1VoVcws4gvYqemT9UPgc/Dz8ZcuHEmaDI88vstpg/QfnhehNsP/h9UJBDCn00GdR8Y6UIiHSsMVmyiwzkaX/Te2NoGqSvzwPPe/CP3fhio2TCcCQ//xEtGCU3vABgxmfngyRiL0h2SCn6EpEnwQUY2SjoAHWDQefFoSomfc1afv5WnZq7PyNxeVr8/rFoaPZ/0ryuZnL40EVFYsjlye8yuvXJo7GfYta7VbOvLDBWRvmz/sEy1m/eni1uUbfiiVtjpYITb4yNbLy/YRoSIa5yTZuoqV4MjQGaMJe1dCooKn/ZzOzplgXdBKJ5SuBBe4y+irgM/sXff777fP7oTf2a58d198KvNYLzt8Ev2k5OBqxk3vB5peXf/s0slXHwDa+TxTANL/9AvyR+vRP/A7vkqqqEaP5K/VpYDvd3YmAke7wDBRPSl+OPT3zexYVRw2VpZicRjDNRXLg30JXUTNW44w5PMUotHOqYRqNIGkwwRk1TyyYNeh0W0DWqot6LImb363YZyNKJ1YNQEgDLgOSZ9vkA14hCzYT9AY8wVaBsIGulyGz4rdFkN2zuLYLLCNtPQQuZWZKVUL5zC9BKUOYzNPswNcBXJFdhOtSpMP56EZ+RRjlE5JJwQllDMTyQX7odHIiIWzdmwVKr0QlkS1mlY9SNXKTOBsD4eaCagN0aIHIWvFmFHRWHAufH8JJOlg1Iw35LUpKyBOITdPaKloOiDzBOZOebdyj6KTREcQKILiGBMiF3RDRkYMYanu1g61ElT0A3wWidSkHu0qUC0vMr1AuloEvrBEihwlGs21kSlox2VJL+yaOWddAAA=') format('woff2'),
  url('iconfont.woff?t=1586700421768') format('woff'),
  url('iconfont.ttf?t=1586700421768') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1586700421768#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-close:before {
    content: "\e616";
    transition: color .3s ease,opacity .15s ease;
}

.icon-close:hover:before {
    color: #868686;
}

.icon-arrow\:before {
    content: "\e610";
}

.icon-right:before {
    content: "\e71c";
}

.icon-right {
    font-size: 12px;
}

Hi Wang,

Are you able to access your icon from browser independently?
If possible can you please share oml

Salman Ansari wrote:

Hi Wang,

Are you able to access your icon from browser independently?
If possible can you please share oml

It can be accessed in the local environment, and icon resources are requested

you can open DropdownTreeTest Screen in Browser to watch demo


Hi Wang,


I can see in your code below img path should be for folder icon.
and that is displaying in your screen..

Salman Ansari wrote:

Hi Wang,


I can see in your code below img path should be for folder icon.
and that is displaying in your screen..

Hi Salman,

this icon is fontawesome, but the trouble isn't here

In picture,There is an icon where the red arrow points, but is not display.You can select the icon by pressing the Ctrl + Shirt + C in the browser

There is an i tag with icon class icon -arrow

but It‘s not work

Salman Ansari wrote:

Hi Wang,


I can see in your code below img path should be for folder icon.
and that is displaying in your screen..

In local environment, there will be a request like this

the request is from css code

Hi Wang,


Do you want to display some dynamic icons here?

Salman Ansari wrote:

Hi Wang,


Do you want to display some dynamic icons here?


Right! These icons are created in the same way as fontawesome

Hi Yi Wang,

According to the comments on that CSS, that "src" attribute is only used for IE6-IE8, for more recent browsers it would actually use the TrueType version?

Also, as with any external resource, whatever is the URL used, it needs to point to where the actual resource is:

  • Apart from your "data:" URL that has the font embedded directly (!!), all other URLs are assuming the icon font files is at the root of your application

In OutSystems, you will either link to an external location for the font (think Google Font API) or you will add the needed files to your module's Resources folder a refer to it (check here and here on how to do it).

Hope this helps!

Solution

Yi Wang wrote:

Salman Ansari wrote:

Hi Wang,


Do you want to display some dynamic icons here?


Right! These icons are created in the same way as fontawesome

Hi Wang,

You can do like attached screen shot.Hope this helps

Solution

Salman Ansari wrote:

Yi Wang wrote:

Salman Ansari wrote:

Hi Wang,


Do you want to display some dynamic icons here?


Right! These icons are created in the same way as fontawesome

Hi Wang,

You can do like attached screen shot.Hope this helps


I've changed to the fontawesome Icon.Thanks

Jorge Martins wrote:

Hi Yi Wang,

According to the comments on that CSS, that "src" attribute is only used for IE6-IE8, for more recent browsers it would actually use the TrueType version?

Also, as with any external resource, whatever is the URL used, it needs to point to where the actual resource is:

  • Apart from your "data:" URL that has the font embedded directly (!!), all other URLs are assuming the icon font files is at the root of your application

In OutSystems, you will either link to an external location for the font (think Google Font API) or you will add the needed files to your module's Resources folder a refer to it (check here and here on how to do it).

Hope this helps!


I got it ,thank you again Jorge

Yi Wang wrote:

Salman Ansari wrote:

Yi Wang wrote:

Salman Ansari wrote:

Hi Wang,


Do you want to display some dynamic icons here?


Right! These icons are created in the same way as fontawesome

Hi Wang,

You can do like attached screen shot.Hope this helps


I've changed to the fontawesome Icon.Thanks


My pleasure !
Good to hear I can help.

Happy Coding :)