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.

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

Problem with dynamically added icons #29

Open
sogrbilja opened this issue Mar 9, 2020 · 2 comments
Open

Problem with dynamically added icons #29

sogrbilja opened this issue Mar 9, 2020 · 2 comments

Comments

@sogrbilja
Copy link

sogrbilja commented Mar 9, 2020

I have a problem with dynamically added icons -> they don't show, check the following example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vivid-icons@1.0.10" type="text/javascript"></script>
</head>
<body>
  <p>Here is a bag</p>
  <i data-vi="bag"></i>
  <p>Now add a box</p>
  <button id="add" type="button">Add a box</button>
  <script>
    
    $("#add").click(function(){
      $("body").append("<p>added, but where it is?</p>");
      $("body").append('<i data-vi="bag"></i>');
    });
    
  </script>
</body>
</html>

Is there a way to make this working?

Thanks

@reflash
Copy link

reflash commented May 25, 2020

I have the same issue when simply moving to a new page in SPA. Icons are not being rendered only if I reload the page

@sogrbilja
Copy link
Author

@reflash I've opted not to use vivid icons after that. I like them, but... Instead, I went for icomoon. They are much easier to work with and they are also nice too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants