I include font awesome CSS in Symfony twig file.
{% stylesheets
"#AppBundle/public/admin/bower_components/bootstrap/dist/css/bootstrap.min.css"
"#AppBundle/public/admin/bower_components/metisMenu/dist/metisMenu.min.css"
"#AppBundle/public/admin/dist/css/sb-admin-2.css"
"#AppBundle/public/admin/bower_components/font-awesome/css/font-awesome.min.css"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
It applies in this page. I check this, but icon class is not applied with the font. Please give me solution. Thanks in advance.
Related
I generate my file with code like this:
{% block head_stylesheets %}
{% stylesheets
filter='?uglifycss'
'#MyBundle/Resources/public/less/myfile.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen"/>
{% endstylesheets %}
{% endblock head_stylesheets %}
It dumps a file named like this: c543k540_myfile_1.css
This file is composed of the asset name followed by the filename: {assetName}_{filename}.css
How can I customize the output in keeping the asset name in the output?
{% block head_stylesheets %}
{% stylesheets
output="css/mynewfilename.{assetName}.css" // <--- Here
filter='?uglifycss'
'#MyBundle/Resources/public/less/myfile.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen"/>
{% endstylesheets %}
{% endblock head_stylesheets %}
Update to clarify
I know that if I use the name option, in prod it will compile to myouputname.css but what I would like to have in debug/dev environment is following the bellow code something like myfile_myouputname_1.css
{% block head_stylesheets %}
{% stylesheets
name="myouputname" // <--- Here
filter='?uglifycss'
'#MyBundle/Resources/public/less/myfile.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen"/>
{% endstylesheets %}
{% endblock head_stylesheets %}
Thanks for your reply.
Using Assetic to manage web assets in Symfony applications is no longer recommended. Instead, use Webpack Encore.
https://symfony.com/doc/current/frontend/assetic/index.html#dumping-asset-files
Page-Specific JavaScript or CSS (Multiple Entries) is described here:
https://symfony.com/doc/current/frontend/encore/simple-example.html#multiple-javascript-entries
// webpack.config.js
Encore
// ... general CSS file here...
.addStyleEntry('some_page', './assets/css/assetName.css')
;
Using addStyleEntry() is supported, but not recommended. A better option is to follow the pattern above: use addEntry() to point to a JavaScript file, then require the CSS needed from inside of that.
I would like to generate a pdf from an html.twig template but something wrong...
In fact, the PDF has been create with the good content but there is no layout. It's seems the CSS files are not import...
I use Bootstrap from twitter to manage the layout.
Here the part of my controller
$filename = "CI-TRI-".$Chrono->getChrono();
$this->get('knp_snappy.pdf')->generateFromHtml(
$this->renderView('WebStoreMainBundle:Admin:customInvoiceTemplate.html.twig', array('User'=>$User,'Parts'=>$parts, 'device'=>$device, 'rate'=>$rate)),
__DIR__.'/../../../../web/download/'.$filename.'.pdf'
);
And here my layout :
<html>
<head>
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/customInvoice.css') }}">
<base href="http://{{app.request.host}}">
<meta charset="UTF-8" >
{% endblock %}
</head>
<body>
{% block header %}
<div class="span2">
<img src="{{ asset('bootstrap/img/GTO_logo.png') }}">
</div>
{% endblock %}
{% block content %}
{% endblock %}
</body>
Wish someone can help me..
PS: Sorry for the typos, english is not my native language.
It would be easier to supply absolute parameter like that:
<link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/bootstrap.css', absolute=true) }}">
The assets must be linked using absolute paths. So instead of:
<link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/bootstrap.css') }}">
It should be:
<link rel="stylesheet" type="text/css" href="http://yourdomain.com/bootstrap/css/bootstrap.css">
I had this issue myself and this sorted it out for me.
Take note when using Symfony 2.7, Twig has removed absolute argument for asset() function.
<link rel="stylesheet" type="text/css" href="{{ absolute_url(asset('bootstrap/css/bootstrap.css')) }}">
See New in Symfony 2.7: the new Asset component for more info.
#user1805558's answer worked for me. I was also using Less, and used this, which some may find helpful to see:
{% block stylesheets %}
{% stylesheets filter='lessphp' combine=true output='css/pdf.css.twig'
'../app/Resources/assets/css/pdf.less'
%}
<link rel="stylesheet" type="text/css" href="{{ asset(asset_url, absolute=true) }}"/>
{% endstylesheets %}
{% endblock %}
UP for absolute option in asset call :
<img src="{{ asset('/assets/img/AVNZ-Logo-H-SMALL.jpg', absolute=true) }}">
It's related in official bundle repo :
https://github.com/KnpLabs/KnpSnappyBundle/issues/78
I had the same problem. As commented in this issue your asset URLs need to be absolute.
This can be accomplished in symfony using the asset twig funtion and "package urls":
http://symfony.com/doc/current/reference/configuration/framework.html#assets-base-urls
For example:
<link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/bootstrap.css') }}">
And then, in your app/config/config.yml
framework:
# ...
templating:
assets_base_urls:
http:
- "http://yourdomain.com/"
If you are in your local configuration, inside your config_dev.yml you should use a different URL instead, like:
- "http://localhost/myproject/web/"
I would like add CSS to one Action/View in my Project. In Symfony i can use for this config/view.yml in specific folder. This add CSS to section HEAD.
In Symfony i use:
{% stylesheets 'bundles/acme_foo/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
but this add CSS in current place, not in section HEAD. How is the best method in Symfony2 to add CSS and JS for one action/view in section HEAD of HTML?
You can add it as a code-block by extending the template.
I'm currently developing a web application using Symfony 2.1.0.
I've read through the Templating chapter of the book and I'm trying to include assets (right now, it's just a single stylesheet) in my web pages.
I'm using the Three-level inheritance system that is mentioned in the book, and my application structure currently looks like this:
app/Resources/views/
base.html.twig: base template, containing title, stylesheets and body blocks.
src/My/PageBundle/Resources/views
layout.html.twig: layout template (extending the base template), appending the main stylesheet to the stylesheet block, and overwriting the body block, including navigation.html.twig and defining a content block
layout-admin.html.twig: same thing as above, but including navigation-admin.html.twig
src/My/PageBundle/Resources/views/Main
standard templates, extending the layout template and overwriting its content block
src/My/PageBundle/Resources/views/Administration
administration templates. Same thing as above, but extending the administration layout template.
src/My/PageBundle/Resources/public/css
main.css: main stylesheet
As you can see, I have put the stylesheet in my bundle. I don't know whether this is good practice or not.
Now, the thing is, in layout.html I added this:
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" type="text/css" href="{{ asset('css/main.css)' }}" />
{% endblock %}
But asset('css/main.css') is just linking to /css/main.css, whereas ./app/console assets:install installs the assets in web/bundles/mypagebundle/. I don't like the fact that this way, my bundle name would be publicly visible (which could make users suspect I'm using Symfony, and I like keeping the internals of my webpage, well, internal). Is it possible to change the directory where assets:install would install the assets? It seems tedious to me to manually install the assets in web/.
I'm also thinking about using Assetic for asset management, as I personally like the possibility to automatically minify my scripts/stylesheets and store them all together in one file. However, I hear that this is not possible if you include stylesheets at different levels, i.e. it wouldn't work with the three-level inheritance system. Is it possible to work around that? Also, would using Assetic enable me to hide my bundle name from the public?
Using assetic would address all your issues.
I hear that this is not possible if you include stylesheets at different levels, i.e. it wouldn't work with the three-level inheritance system
You can, but it will generate a css file for each level (just like with asset(), actually).
Example:
layout:
{% block stylesheets %}
{{ parent() }}
{% stylesheets 'main.css' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
sub-template:
{% block stylesheets %}
{{ parent() }}
{% stylesheets 'sub.css' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
result:
<link rel="stylesheet" type="text/css" href="..." />
<link rel="stylesheet" type="text/css" href="..." />
Alternatively sub-template can completly override the stylesheets block, so that only one stylesheet is generated (but it's less dry):
{% block stylesheets %}
{% stylesheets 'main.css' 'sub.css' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
result (in production / non debug):
<link rel="stylesheet" type="text/css" href="..." />
I hvae the css located in
app/Resources/FOSUserbundle/css
How can i include that in my twig template
The reason i am putting css there is that my all overridden FOSUser templates in in that folder. So i want to keep css , js images all in there so that if i need to use in other website i just copy that folder
I'm not quite sure how you would include that in your TWIG templates, but ...
1) I put the resources I use in several bundles / projects in the web/ directory. Then you can reference then like this:
{% stylesheets 'css/styles.css' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
2) If you need to override the FOSUserbundle anyway, you can put the resources inside the inheriting bundle, referencing them like this:
{% javascripts '#YourBundle/Resources/public/js/scripts.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
What you have done is perfectly all right.
Just do the following:-
$ app/console assets:install web
It will install the assets in the public "web" directory, where the assets should technically be, to be used with your Twig Templates.
Assets can then be used within Twig templates like this:-
{% block stylesheets %}
<link href="{{ asset('/css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
{% block javascripts %}
<script src="{{ asset('/js/main.js') }}" type="text/javascript"></script>
{% endblock %}
Although the question suggests and override case, it also aks for a case where the css or js are in a common folder, away from the bundle structure.
One answer is to use the available twig variables. For example if I have one css file located here
app/Resources/views/clientSite/customFolder/css/mycss.css
I can load in any template using something like this (note the example overrides the full stylesheets block, but not required, the stylesheet twig tag can be added in any block):
{% block stylesheets %}
{{ parent() }}
{% stylesheets '%kernel.root_dir%/Resources/views/clientSite/customFolder/css/mycss.css'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Also remember to execute the assetic:dump command, so symfony knows it had to publish the css to the web/css folder with all the other files.