-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
FontAwesome icons specified as unicode not displayed properly #1611
Comments
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 ***@***.***> 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
<#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 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; `data-icon` = "\uf096" |
Yes, this worked perfectly, thank you Joe. My apologies for this turning into more of a SO post. |
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.The output:
See http://fontawesome.io/cheatsheet/ for
fa-square-o
unicode.The text was updated successfully, but these errors were encountered: