Shiny: FontAwesome icons specified as unicode not displayed properly

[nteetor]

I stumbled across this issue when trying to specify a FontAwesome unicode string as an html tag data attribute.

The small shiny app below demos how icon("square-o") and a standard unicode symbol ♠ display properly, but a FontAwesome icon specified using unicode does not display correctly.

library(shiny)

shinyApp(
  ui = fluidPage(
    tags$ol(
      tags$li(
        icon("square-o")
      ),
      tags$li(
        ""
      ),
      tags$li(
        HTML("")
      ),
      tags$li(
        enc2utf8("")
      ),
      tags$li(
        HTML(enc2utf8(""))
      ),
      tags$li(
        HTML(enc2utf8("♠"))
      ),
      tags$li(
        HTML(enc2utf8("♠"))
      )
    )
  ),
  server = function(input, output, session) {

  }
)

The output:

See http://fontawesome.io/cheatsheet/ for fa-square-o unicode.

[jcheng5]

I think you'd also need to change the font-family using CSS if you want
these to work.
On Fri, Mar 17, 2017 at 8:28 AM Nate Teetor [e-mail]
wrote:

I stumbled across this issue when trying to specify a FontAwesome unicode
string as an html tag data attribute.

The small shiny app below demos how icon("square-o") and a standard
unicode symbol ♠ display properly, but a FontAwesome icon specified using
unicode does not display correctly.

library(shiny)

shinyApp(
ui = fluidPage(
tags$ol(
tags$li(
icon("square-o")
),
tags$li(
""
),
tags$li(
HTML("")
),
tags$li(
enc2utf8("")
),
tags$li(
HTML(enc2utf8(""))
),
tags$li(
HTML(enc2utf8("♠"))
),
tags$li(
HTML(enc2utf8("♠"))
)
)
),
server = function(input, output, session) {

}
)

The output:
[image: screen shot 2017-03-17 at 11 18 03 am]
https://cloud.githubusercontent.com/assets/3228369/24049776/6c21b426-0b03-11e7-8c51-82cf16ea3745.png

See http://fontawesome.io/cheatsheet/ for fa-square-o unicode.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/rstudio/shiny/issues/1611, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAH6DyQi1Nskl37CQYoSPgHg6_hKrLv8ks5rmqamgaJpZM4MgvCb
.

[jcheng5]

Yeah, see here: http://stackoverflow.com/questions/17254339/font-awesome-unicode

[nteetor]

You are absolutely correct.

My example was not what I meant to put together. I think I was too deep in the weeds by that point.

The real problem, that I tried to abstract away in my first example application, is shiny does not seem to allow inclusion of FontAwesome icons through CSS attr() and tag data attributes. Here is an SO link better illustrating what I am trying to accomplish, http://stackoverflow.com/questions/34596056/how-to-use-data-attributes-with-font-awesome.

In shiny using a data attribute has not worked. Here is an updated example,

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$style(".marked::before { font-family: FontAwesome; font-style: normal; content: attr(data-icon) }")
    ),
    tags$ol(
      tags$li(
        icon("square-o")
      ),
      tags$li(
        HTML("♠")
      ),
      tags$li(
        class = "marked",
        `data-icon` = HTML("")
      )
    )
  ),
  server = function(input, output, session) {

  }
)

[jcheng5]

Oh OK, that's fair. The reason is because the HTML tag functions always HTML-escape their attributes; HTML() is not respected for attributes. In this case, you can use a literal character instead:

`data-icon` = "\uf096"

[nteetor]

Yes, this worked perfectly, thank you Joe. My apologies for this turning into more of a SO post.