Using CSS Library from the Flaticon CDN

App Building
#1

Hi there. I have a reasonble grasp of HTML / CSS etc, but am not an expert. I am trying to incorporate the Flaticon icons into my app (Uicons: 8,000+ Free icons, SVG and icon font. Awesome icons for any project).

I have added the CDN URL (https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css) into the Libraries under 'Scripts and Styles'.

I then played around with a Text field using <i class="fi-rr-add"></i>, but am unable to get anything to render. I am sure that I am missing a step, but no idea what it is.

Can anyone point me in the right direction please...?

Many thanks. Adam

#2

The libraries section of Scripts & Styles is intended for JS libraries, not CSS. As a workaround, you can go to the CSS tab, and add

@import url("https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css");

Which should allow you to use the icons in your app:

2548×848 175 KB

2 Likes
#3

Awesome - thank you so much Mark. Am loving the Retool platform - it really is fantastic. :smiley:

#4

No problem, happy to help! If you run into any other issues or questions as you continue to use Retool don’t hesitate to reach out again!

#5 
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>

<!-- font flat-ui cdn 2.2.2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.2.2/css/flat-ui.min.css"
    integrity="sha512-PvB3Q4vTvWD/9aiiELYI3uebup/4mtou3Mc/uGudC/Zl+C9BdKUkAI+5jORfA+fvLK4DpzC5VyEN7P2kK43hjg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

With that it would work perfectly.