Skip to content
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.

Sign up for GitHub

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

Jump to bottom

What's the syntax for displaying a FontAwesome icon? #53

Closed
dmoore247 opened this issue Nov 30, 2019 · 6 comments
Closed

What's the syntax for displaying a FontAwesome icon? #53

dmoore247 opened this issue Nov 30, 2019 · 6 comments

Comments

@dmoore247
Copy link

What's the syntax for displaying a FontAwesome icon at a given node location?
I've skimmed everything here in the repo, I see the add_node(... shape='icon',... ) but how to add the other icon parameters? If this needs hacking where would I start to achieve something like:
https://visjs.github.io/vis-network/examples/network/nodeStyles/customGroups.html ?
Thanks!
@dmoore247
Copy link
Author

dmoore247 commented Nov 30, 2019 •
edited
Loading

Found the answer... pretty clever library, the options are dictionaries mirroring the JS code.

import pandas as pd

net = Network(height="400px", width="400px", bgcolor="#222222", font_color="white", notebook=True, directed=True)
net.options.groups = {
            "users": {
                "shape": 'icon',
                "icon": {
                    "face": 'FontAwesome',
                    "code": '\uf0c0',
                    "size": 50,
                    "color": 'orange'
                }
            },
            "table": {                 
              "shape": 'icon',
              "icon": {
                  "face": 'FontAwesome',
                  "code": '\uf0ce',
                  "size": 50,
                  "color": 'green'
                }
            }
        }

net.add_node("a", shape="icon", group="users")
net.add_node("b", shape="icon", group="table")
net.add_edge("a","b")
net.show("net.html")

# patch in font-awesome css
# replace https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
html_str = net.html.replace(
  '<head>',
  '<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>'
)
#print(html_str)
displayHTML(html_str)```

@dmoore247
Copy link
Author

image

@dmoore247
Copy link
Author

The answer lies in https://pyvis.readthedocs.io/en/latest/documentation.html#pyvis.network.Network.add_node and the 'group' optional parameter to the node.

@dmoore247
Copy link
Author

Please note I still have to hack in the font-awesome CSS...

# replace https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
html_str = net.html.replace(
  '<head>',
  '<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>'
)```

@wjbmattingly
Copy link

Elegant solution. I spent the evening trying to figure this out.

@gigony gigony mentioned this issue Aug 27, 2021
Open
@BerserkerGaruk
Copy link
Member

BerserkerGaruk commented Oct 21, 2021 •
edited
Loading

Answered: #53 (comment)
Closing, but might add an example using this method.

@devopstales devopstales mentioned this issue Mar 13, 2023
Closed
@ClearSky0 ClearSky0 mentioned this issue May 26, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@dmoore247 @BerserkerGaruk @wjbmattingly