rfont-awesomevis.jsvisnetwork

Changing color of fontAwesome icons with visNetwork


I tried the example proposed in the documentation of visNetwork R package regarding the usage of fontAwesome icons.

In the example below I use the option of passing the node properties via a data.frame. However, the color of the icons in the output gets a default blue color.

library(visNetwork)

nodes <- data.frame(id = 1:3, 
                    shape = "icon", 
                    icon.face = "FontAwesome",
                    color = c("#800000", "#0000ff", "#ffa500"), # doesn't have any effect on icon color
                    icon.code = c("f1ad", "f015", "f007"))
edges <- data.frame(from = c(1,2), to = c(2,3))

visNetwork(nodes, edges) %>%
  addFontAwesome()

node-no-color-effect

It seems that the alternative is to use the grouping option described in the documentation. However, I would want to have the data.frame option working as well and I can't figure out at the moment what I do wrong above.

nodes <- data.frame(id = 1:3, 
                    shape = "icon", 
                    group = c("A", "B", "C"))
edges <- data.frame(from = c(1,2), to = c(2,3))

visNetwork(nodes, edges) %>%
  visGroups(groupname = "A", shape = "icon", 
            icon = list(code = "f1ad", color = "#800000")) %>%
  visGroups(groupname = "B", shape = "icon", 
            icon = list(code = "f015", color = "#0000ff")) %>%
  visGroups(groupname = "C", shape = "icon", 
            icon = list(code = "f007", color = "#ffa500")) %>%
  addFontAwesome()

alternative


Solution

  • Change color to icon.color and everything works:

    library(visNetwork)
    
    nodes <- data.frame(id = 1:3, 
                        shape = "icon", 
                        icon.face = "FontAwesome",
                        icon.color = c("#800000", "#0000ff", "#ffa500"), # doesn't have any effect on icon color
                        icon.code = c("f1ad", "f015", "f007"))
    edges <- data.frame(from = c(1,2), to = c(2,3))
    
    visNetwork(nodes, edges) %>%
      addFontAwesome()
    

    Coloured visNetwork