I've added FontAwesome pro with Yarn to my Rails 6 application and added it to application.js like this:
import "#fortawesome/fontawesome-pro/js/all";
import "#fortawesome/fontawesome-pro/css/all.css";
Before (when using FontAwesome through the asset pipeline) the generated HTML came out like this:
<i class="fal fa-heart-rate"></i>
Now it comes out like this:
<svg class="svg-inline--fa fa-heart-rate fa-w-20" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="heart-rate" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M480 224c-6.53 0-12.44 3.98-14.84 10.06l-45.62 114.05-84-335.98C333.72 4.86 327.69.17 319.62 0c-7.5.19-13.84 5.53-15.31 12.86l-82.06 410.23-46.72-186.97A16.005 16.005 0 0 0 160 224H8c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h139.5l60.97 243.88c1.78 7.14 8.22 12.12 15.53 12.12h.38c7.5-.19 13.84-5.53 15.31-12.86l82.06-410.23 78.72 314.97c1.69 6.73 7.53 11.62 14.44 12.09 7.62.28 13.38-3.59 15.94-10.03l60-149.94H632c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8H480z"></path></svg>
Is there a way to prevent this? I'm asking because I do stacking of icons which worked perfectly before and now it doesn't come out correctly anymore.
Apparently the solution is pretty easy.
If you don't include the JS, this will not happen and everything will be rendered as before.
So in the application.js:
import "#fortawesome/fontawesome-pro/css/all.css";
I removed the JS and the font-icon appeared as li tag, like before, so you only need to remove the line:
import "#fortawesome/fontawesome-pro/js/all";
Related
I replaced all my images with webp images recently, but they take > 5 seconds to load! I am wondering what could be the problem... It's not a small image (4608 * 3072), but more than 5 seconds is way too much... or is this normal?
My HTML looks like this:
<div class="row align-items-center justify-content-center no-gutters h-100" style="background-image: url("/images/banner-large.webp");">
</div>
The Google dev tools Network tab gives 206 status for the webp at first, and 200 after reloading. I am wondering what could be the issue?
I have the angular 6 application which has got a main sidenav container. in one of the page i am using a simple sidenav. evertything is working but the sidenav mode is not working as expected. Though i set the mode to 'side' it is using 'over' as the default.
<mat-sidenav-container>
<mat-sidenav [mode]="sidenavOption.mode"
position="start"
[opened]="sidenavOption.open"
appKvpDashboardSidenav
#leftsidenav>
<app-left-sidenav [sidenav]="leftsidenav"
[isEditing]="isEditing"
[kvpDashboardId]="kvpDashboardId"
[kvpModelId]="kvpModelId"
[kvpModelPath]="kvpModelPath">
</app-left-sidenav>
</mat-sidenav>
<mat-sidenav-content fxLayout="row">
<app-kvp-sidenav-toggle (toggleClicked)="toggleSidenav()"></app-kvp-sidenav-toggle>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
I am using the below setting in .ts file
sidenavoption.mode = 'side'
sidenavoption.open = true
Can anyone help how to make this work?
My wkhtmltopdf PDF output of a page with several Highcharts charts on it is missing some elements of the charts, primarily all of the simple straight lines, including tick marks, grid lines, column borders, legend borders and the lines in my line/spline charts (data points display).
I have tried the tricks used to solve this issue from other stack questions, namely setting all of the following on the series:
enableMouseTracking: false,
shadow: false,
animation: false
...as well as setting those on the column/spline. No luck.
Here is a link to an image of the browser page.
Here is a link to an image of the pdf output.
Here is a link to a gist of my chart options for the first two charts.
This is all on Linux Ubuntu 12.04 installed in a VirtualBox guest, using the latest Highcharts download as of two days ago and wkhtmltopdf version 0.10.0_rc2. The calls to wkhtmltopdf are primarily going through the PDFKIT gem in a Rails 3 application, but I have made direct calls to wkhtmltopdf on the command line with the same results.
TIA for any help!
UPDATE:
I have isolated the problem down to a particular snippet of HTML that comes before the charts. I am using the Twitter Bootstrap css/javascript framework, this code produces a set of buttons:
<div class='btn-group' data-toggle='buttons-radio'>
<button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2012">2012</button>
<button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2011">2011</button>
<button class="filterButton btn btn-primary selected" data-filter="school_year" data-group="dr_filter" data-value="2010">2010</button>
<button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2009">2009</button>
<button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2008">2008</button>
</div>
Specifically, it is the presence of the .btn-group tag that is causing the issue - take that away, leave everything else as is, and the PDF generates identical to the page display without the noted issues. Also, if you move this snippet to anywhere on the page after the charts, everything works correctly.
I have further isolated the problem down to the actual html/css, as the issue still exists when I completely disable the Bootstrap javascript functions.
There is reported an issue on wkhtmltopdf which is very similar to your case. See issue 689. Wkhtmltopdf doesn't handle transparency/shadows properly and can result in unpredictable results.
Remove all stroke-opacity attributes in the svg and replace them with the opacity attribute, before you send it to wkhtmltopdf. This piece of code will do the trick.
nodes = document.querySelectorAll('*[stroke-opacity]');
for (nodeIter = 0; nodeIter < nodes.length; nodeIter += 1) {
elem = nodes[nodeIter];
opacity = elem.getAttribute('stroke-opacity');
elem.removeAttribute('stroke-opacity');
elem.setAttribute('opacity', opacity);
}
try passing option javascript-dealy
wkhtmltopdf --quiet --page-size letter --encoding UTF-8 --javascript-dealy 5000 - -
or if you are using pdfkit gem/library try adding below line in html code
<meta content="5000" name="pdfkit-javascript-delay"/>
I'm using wkhtmltopdf v0.11.0 rc1 in a Rails application through wicked_pdf (I know wicked_pdf does not support the new command line parameter notation, I'm using my own fork of the gem). I thought that content not fitting within a page should automatically overflow to the next one, but this is not the case - I'm seeing text just being cut off, sometimes in the middle of a line.
I know I can layout my pages using page-break-after:always, but this looks like dirty hard-coding, and besides the HTML comes from an ERB template so it's not always obvious where to put page breaks.
Can something be done so that page breaks are inserted automatically? Am I missing something about how this works?
Here's what the generated command line looks like
\"c:/program files (x86)/wkhtmltopdf/wkhtmltopdf.exe\"
--header-html \"file:///C:Users/bleak/AppData/Local/Temp/campaign_report.header.pdf_pdf_1580_0.html\"
--footer-html \"file:///C:/Users/bleak/AppData/Local/Temp/campaign_report.footer.pdf_pdf_1580_0.html\"
--margin-top 20 --margin-bottom 15 --margin-left 5 --margin-right 40
--page-size \"A4\"
page \"file:///C:/Users/bleak/AppData/Local/Temp/campaign_report_cover.pdf_pdf_1580_0.html\" --disable-javascript
toc --xsl-style-sheet \"c:/work/morizo/admoney/app/views/layouts/campaign_report.xsl\" - -
It turned out that this was happening due to fixed sizes on divs used to wrap document sections:
div.page {
width: 180mm;
height: 277mm;
overflow: hidden;
page-break-after: always;
}
Once I removed width and height, auto breaking started working as expected. Simple.
In the newest release of Twitter Bootstrap (2.0) I came across this line:
border-radius: 0 \0/;
What does the \0/ do? Is the some obscure css trick or simply a typo?
https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap.css#L568
Apparently, the \0/ is a construct that IE 9 ignores, but other browsers don't, so this line's there to set border-radius to 0 for IE 9 only.
The Twitter Bootstrap developers left a comment in their sass source (although, the accompanying commit message isn't exactly self-assured):
border-radius: 0 e("\0/"); // Nuke border-radius for IE9 only
Paul Irish's fairly exhaustive list of CSS browser hacks says that \0/ after an attribute is a hack that targets IE 8 and 9.