Edinburgh-Genome-Foundry
can't get the icons working
Hi, 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.
I found some errors as below:
C:\ProgramData\Anaconda3\lib\site-packages\weasyprint\text.py:28: UserWarning: There are known rendering problems with Cairo <= 1.14.0
warnings.warn('There are known rendering problems with Cairo <= 1.14.0')
C:\ProgramData\Anaconda3\lib\site-packages\weasyprint\fonts.py:41: UserWarning: @font-face is currently not supported on Windows
warnings.warn('@font-face is currently not supported on Windows')
It seems that it's not supported on Windows?
I have the same problem in ubuntu and alpine linux. The icons works fine on Google Chrome. But failed in pdf. cairo-1.15.14 WeasyPrint=43 Demo example.pdf is good, how did it come from?
I found a way that icons work: using 'link' tag in html head instead of using weasypint.CSS api to specify a css file
It seems like an issue with underlying WeasyPrint library.
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).
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
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.css in a head tag did not work for me.
