Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
can't get the icons working
See original GitHub issueHi, thanks for the great project!
But i can’t get the icons working.
look at the pdf screenshot below:
So I made a simple html file to test this css file semantic.min.css:
<html>
<head>
<link rel="stylesheet" type="text/css" href="semantic.min.css">
</head>
<body>
<h2>My report test</h2>
<div class="ui container">
<div class="ui icon message yellow block-center">
<i class="exclamation circle icon"></i>
<div class="content">
<div class="header">This is an important message, as per the exclamation mark.</div>
<p>
You can add content to your message explaining why it is important and
what the reader can do to de-importantize the situation.</p>
</div>
</div>
</div>
<button class="ui icon button">
<i class="cloud icon"></i>
button
</button>
<div class="ui negative message"><i class="inbox icon"></i>
<div class="content">
<div class="header">header</div>
<p>Test Message</p>
</div>
</div>
</body>
</html>
It doesn’t work, too.
So I tried to search for the answer.
And I modified the file Anaconda3\Lib\site-packages\pdf_reports\css\semantic.min.css at line 75 changing the fonts’ urls.
The codes become like this:
@font-face{font-family:Icons;
src:url(https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/themes/default/assets/fonts/icons.eot);
src:url(https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/themes/default/assets/fonts/icons.eot?#iefix) format('embedded-opentype'),url(https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/themes/default/assets/fonts/icons.woff2) format('woff2'),url(https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/themes/default/assets/fonts/icons.woff) format('woff'),url(https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/themes/default/assets/fonts/icons.ttf) format('truetype'),url(https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/themes/default/assets/fonts/icons.svg#icons) format('svg');
After I modified , I tested again.
The test.html that I created to test works on Firefox Chrome and Edge.
But the pdf file that I use pdf-reports to create still doesn’t work.
Any help?
Thanks.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:7 (1 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I’m not sure that the issue is caused by WeasyPrint but maybe more because of the way Semantic UI treats font-awesome as different classes (?).
Anyways, as mentioned by @shotecorps , a quick and dirty way is to insert the font-awesome style sheet directly on top of your template to display icons correctly (link found in Font Awesome website).
If someone as the exact reason/solution, don’t hesitate to comment 😃
I’m having the same issue on a Mac. Adding a link to
all.cssin aheadtag did not work for me.