Shiny: FontAwesome icons specified as unicode not displayed properly

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 notifications@github.com
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
.

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

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) {

  }
)

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"

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