I'm trying to use font awesome in dompdf/laravel but no matter what I try the icons don't show up, I've seen a bunch threads with similar or the same issue and their answers don't work for me. In my project I'm using vue.js for everything except the pdf where as far as I know I can only use a blade.
I've added this to the top of my HTML blade file
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<meta charset="utf-8">
<link rel="stylesheet" href="{!! url('css/pdf.css') !!}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header></header>
<main></main>
</body>
</html>
Still no luck, the icons show up as question marks (?)
How can I fix this?
Im not sure, but try installing font-awesome with NPM in the console, npm install font-awesome and then import them into your app.scss; "#import "node_modules/font-awesome/scss/font-awesome";
You can download, customize, and use the icons and default styling manually: Download Link font-awesome Version 4.7.0
Using CSS:
Copy the entire font-awesome directory into your project.
In the <head> of your HTML, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
More Info: font-awesome
Related
I am building a chat application using Meteor for Android. I have included "Add Image" option using cordova camera plugin. Now, after the image is uploaded and is seen by the users, I want to click on it and zoom it. How to proceed?
Here's my image rendering code :
<div class="message">
<img src="{{t.img}}"
data-action="zoom"
class="showImage"
>
</div>
I've tried using the inno:zoom package but was unsuccessful. Any insights?
In the html head, i have the following code :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
I’d suggest using a touch library such as Hammerjs: http://hammerjs.github.io/
There are a lot of ways to work with touch in JavaScript, but they can be difficult if you aren’t experienced with them.
You may have to put the uploaded image in its own template and use reactive variables to re-initialize the image element in order to enact the zoom feature. This is likely also true of the package you already tried.
If you could share more code samples, I (or others) might be able to give a more specific answer.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="scripts/modernizr-custom.js"></script>
</head>
I used the Development Build option on their front page that selects all of the options and I tried minified and not minified but got the same error. I am just downloading the file and placing it in a local folder. I tried it with just selecting the canvas element in thier selection options and it works fine.
This bit of code is what is added in the full feature one and is the line that is giving the error on line 29.
;
define("test/network/beacon", function(){});
Thanks.
Ok they helped me out over there. I was using Ublock and it messed something up.
I have problem with CKEditor. I download lastest version and implement on my CMS. All buttons and textarea are disabled and I can't do anything. I searched and find solutions like CKEditor.inline or readOnly but it just doesn't work...
My code looks just like:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="editor" class="text" rows="4" cols="115">Some text</textarea>
<script type="text/javascript">
CKEDITOR.replace("editor");
</script>
</body>
</html>
And here is live version: http://www.hbmedia.pl/test.php
I finally figured this one out. Thought I'd post an answer in case anybody else comes across this question.
In order for the "Classic Editor" to function within a custom ckeditor4 package, you need to make sure the "wysiwygarea" feature is added to the package. This is named "iFrame editing area" in the feature list.
If you don't do this, only the inline editor is available, even though the classic editor shows up as disabled.
If you don't want to use iframe as a content container you might want to use Div editing area. The behaviour is described in IFrame Editing Area page in the notes section:
This is the core functionality of the classic, iframe-based editor which can only be disabled if it is backfilled by an alternative plugin (such as Div Editing Area) or if only inline editor is used.
I'm using visual studio 2013 and have web essentials for update 4 (2.5.4) installed.
I'm running the web application from visual studio (I happen to be using Chrome) and bootstrap v 3.3.4.
I've removed any reference to bootstraps css file. I have my own less file that imports the bootstrap.less file
#import "../js/BootStrap.3.3.4/less/bootstrap.less";
when I hit F5, it says that my less file compiled to Test1.css.
In my master page I have a reference to the Test1.css file. So it looks something like this
<script type="text/javascript" src="/js/js1.11.1/jquery-1.11.1.min.js"></script>
<link type="text/css" href="/js/js1.11.1/jquery-ui.css" rel="stylesheet" />
<script src="/js/BootStrap.3.3.4/js/bootstrap.min.js"></script>
<link href="CSS/Test1.css" rel="stylesheet" />
However, when the page renders it looks like this
<script type="text/javascript" src="/js/js1.11.1/jquery-1.11.1.min.js"></script>
<link type="text/css" href="/js/js1.11.1/jquery-ui.css" rel="stylesheet" />
<script src="/js/BootStrap.3.3.4/js/bootstrap.min.js"></script>
<link href="/js/BootStrap.3.3.4/css/bootstrap.min.css" rel="stylesheet" />
and it works. Where does the boostrap.min.css come from and why is it working and not using what I have in my masterpage. Further more, the bootstrap.min.css, I've looked using a dir *.css /s command and can not find that file anywhere.
Your ideas would be greatly appreciated.
Zurb Foundation 3 says is compatible with IE8. This is the reason I'm using F3.
I have problems getting to work F3 on IE8.
I tried the official http://foundation.zurb.com/docs/v/3.2.5/grid.php which seems to have the same problems on IE8 which I found on my own site.
More specifically:
Navigation is messed up (The sticky menu is comming like an unstyled
vertical ul/li)
Orbit Javascript slider component doesn't work
Initially accordition looks fine visually. However when clicked it
doen't work as expected
Reveal modals don't work
The same problems are happening on both my site and the official F3 docs page - http://foundation.zurb.com/docs/v/3.2.5/grid.php
What could be the problem?
I suspect it might be something related with including things like html5shiv, etc. However I try to stick as much as possible with how the official F3 is showing. In the demo index.html of Foundation 3 following things are included:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<script src="javascripts/modernizr.foundation.js"></script>
<!-- Included JS Files (Compressed) -->
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
<script>
$(window).load(function(){
$("#featured").orbit();
});
</script>
Do I need to include something else? html5shiv would be enough or I need other things also?
Adding html5shiv.html solved most of the issues.
The only one remaining is that images (transparent PNGs) remain and accumulate on screen (one on top of the other) while the Orbit slider is running.