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

can't get the icons working #1

Open
heavenzone opened this issue Jun 8, 2018 · 7 comments
Open

can't get the icons working #1

heavenzone opened this issue Jun 8, 2018 · 7 comments

Comments

@heavenzone
Copy link

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.
@heavenzone
Copy link
Author

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?

@Zulko
Copy link
Member

Zulko commented Jun 13, 2018

Thanks for this, ill try to fix it.

@JaDogg
Copy link

JaDogg commented Dec 10, 2018

Seems like an issue with underlying WeasyPrint library.

@shotecorps
Copy link

shotecorps commented Jan 16, 2019 •
edited
Loading

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?

@shotecorps
Copy link

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.

@gxdier
Copy link

gxdier commented Jan 17, 2019 •
edited
Loading

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 :)

@shaunpatel
Copy link

shaunpatel commented Apr 26, 2020 •
edited
Loading

I'm having the same issue on a Mac. Adding a link to all.css in a head tag did not work for me.

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
6 participants
@JaDogg @heavenzone @Zulko @shaunpatel @gxdier @shotecorps