Using font-awesome with elm-ui

Learn
1

I am trying to use Font Awesome icons in a elm-ui layout, but the icon included by Font Awesome has no spacing. Is there a way to fix that?

    row [ padding 10, spacing 20, width fill ]
        [ Element.html (Html.i [ Html.Attributes.class "fas fa-draw-polygon" ] [])
        , text "Svg Generator"
        , text "Svg Generator"
        ]

(Sorry, Ellie App doesn’t show the Icon at all: https://ellie-app.com/3Y6KYrd82d4a1 )

2

I found that adding a text " " fixes the Problem but it does not feel clean.

    row [ padding 10, spacing 20, width fill ]
        [ Element.html (Html.i [ Html.Attributes.class "fas fa-draw-polygon" ] [])
        , text " "
        , text "Svg Generator"
        , text "Svg Generator"
        ]
3

Hi,

Ellie-app wasn’t showing the fa-icon because you had your link tag within style tags. That is you had:

<head>
    <style>
        <link
          href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
          rel="stylesheet"
         />
   </style>
</head>

and you want just:

<head>
    <link
      href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
      rel="stylesheet"
    />
</head>

In other words it wasn’t really related to ellie.
Anyway I’m pretty new to elm-ui but I think you can just wrap your Element.html in an Element.el:

view = 
    row [ padding 10, spacing 20, width fill ]
        [ Element.el [] <| Element.html (Html.i [ Html.Attributes.class "fas fa-draw-polygon" ] [])
        , text "Svg Generator"
        , text "Svg Generator"
        ]

Here is an updated ellie with both fixes:
https://ellie-app.com/3Y8QshtqB8Ja1

3 Likes
4

Thanks a lot, it works great now!

2 Likes
5

I thought I’d quickly say that I’ve published a package for FontAwesome.

It doesn’t solve this problem, but it does have a bunch of advantages over using the web-font. The primary one is that if you use the recommended minimisation approach for Elm apps, you will automatically subset the icon library (only including icons you use, reducing the size of your site). It also uses SVGs rather than fonts for the icons, which is generally less of a hack and is more powerful in terms of what you can do with it (at the end of the day it’s an SVG element you can use as you want).

5 Likes
6

I did try to to use your library first, actually. The SVG got included as a huge element and I decided to try the web-font approach instead.

Turns out I forgot to include the required CSS, here is a working version. https://ellie-app.com/3YRQxWLPyLNa1

1 Like
7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.