I want to know which one is faster. Using the font awesome to call the icon is faster or using css url to call the icon?
Font. If you are using the same Font Awesome as me, it is faster to use them as a font, instead of an image. The font is there as a collection of icons which you can use just by inserting a class to an element, or setting up a pseudo class to a class and inserting the icon you want in content.
HTML:
<i class="fa fa-search"></i>
CSS:
.element:before { content: "\f002"; }
Using the background property you have to insert an image url which means you either have to have multiple images in your folder taking up space and finding each and every one, or you have one image and you have to set your background-position for each icon.
Related
I'm struggling with svg icons. I'm creating menu and to do this I have to use several of svg icons. I already know, that if I want to manipulate colour with help CSS (for example when icon is active/hover) I have to use in HTML <svg> tag not <img src="path-to-icon.svg"/>.
How can I solve this problem in a nice way?
I don't want use full path of svg in my HTML file, because sometimes it is has a hundred of lines d="..." attribute. I try to avoid use <use xlink:href="path-to-icon.svg" /> as well, because is not supported by IE or Edge browsers.
I can add that I use .twig template, so maybe there is a 'PHP' way to add icon.
HTML:
<label id="menuIcon" for="menu" onclick="openNav()">
{# svg icon #}
</label>
CSS
.icon:hover path {
fill: green;
}
I would generate my own font file with all the icons used in the application... just like fontawesome or ionicons.
Please see this Craft Function within Twig it may be useful:
https://craftcms.com/docs/3.x/dev/functions.html#svg
You can also put your code into a .twig template and include that like you would any other twig file.
I have SVG version of USA map, and wanted to modify each state there, however, the SVG file was attribute to img tag.
Code Fig. 1:
<img src="https://www.domain.com/path/to/svg/usa-map.svg" alt="">
Each State (svg path) from usa-map.svg will need to update from the admin, where it should be highlighted from the output where if the State (svg path) have property location. Shown in Example.
Image Fig. 1:
Note: Dark colored States have property locations
Case:
Previously in our code, we've managed to use direct SVG in our code and update the State (svg path) via admin using jQuery css to highlight certain State (svg path).
Code Fig. 2:
<script>$("{{$california_state}}").css({ fill: "#9DC75B" });</script>
We decide to use the img tag instead of full raw svg element to reduce weight of the file and speed-up the SEO performance.
Question:
Is it possible to update/modify the SVG path (while it was viewable in img tag) via internal PHP file where this internal file calling the SVG element and inject the css to highlight certain states using jQuery script using our method or is there better alternative solutions for this?
Maybe using webserver rewrites to an svg file path wich originally is an php file that opens the real svg and modifies it could be an solution.
So you could still include the image over an img tag.
I've downloaded this slider:
http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
What I want to do is to make the dot (bullet) for each slider a specific color (first is red, second is blue, etc), and not to be white for all slides.
The class that controls this issue is .da-dots span.da-dots-current:after (in style.css if you downloaded the files above).
The problem is how to change the background property of .da-dots span.da-dots-current:after in the index.html (or index.php) file?
The issue is that the slides are actually a number of DIV's that are listed in the source code and animated using the jQuery slider above.
My index.php contains: http://codepad.org/6Xoelift
Assuming you support only browsers handling CSS3 selectors, you can use the nth-child selector :nth-child(1), :nth-child(2), :nth-child(3), … to style each dot differently.
Good Morning, I am working on my wordpress web-page, which is made of image-boxes and they are changed to one-color background boxes with text on hover. See example here: http://www.top-news.6f.sk/.
I want make this boxes to have random color background or random color from list of colors.
I found out that the color of these boxes isnt set in .css file but its probably generated by some php file or function. (If u inspect source code you cand find that there is generated some css style inside, so if i put this code in my stelysheet.css it still wont work because it is overrided.
Can you give me any clues where to find a code where can i change the color of these boxes? Then I would be able to rewrite it to random color.
Thanks
If you want to override inline styles, in your style.css, use !important.
Similar to :
background-color: #fff !important;
If you want to create a random background color
<?php $hex = dechex(rand(0,255)) . dechex(rand(0,255)) . dechex(rand(0,255)); ?>
and then you’d use the following in your body tag:
<body BGCOLOR=“#<?php echo($hex);?>”>
i have problem in displaying an image in textarea
please help me to solve it
thanks
Textareas can only hold plain text. Use contenteditable or a fully functional editor, like TinyMCE to save you the troubles.
As anothershrubery already mentioned, textarea can only hold plain text.
You can instead use a div element with the contenteditable attribute set to true.
<div contenteditable="true">
You can edit this text and also add images! <img src="smiley.jpg" alt=":)" />
</div>
There are also many different JavaScript WYSIWYG editors which uses the above method or an iframe in designmode.
Here's a couple of them:
Aloha Editor
MarkItUp
TinyMCE
Lightweight RTE
CKEditor
You cannot display images in a textarea. Textarea's just accept plain text.
Textarea support text only, if you want to display image/ link or any thing else, use WYSIWYG HTML Editor
You can try this, a really good one ;)
http://premiumsoftware.net/cleditor/
You can try this:
HTML:
<div id="image_txtarea" style="width:auto">
<img src="image/Example.jpg" id="image" style="position:absolute"/>
<textarea id="some" style="position:absolute;display:none"></textarea>
</div>
JQUERY
$('#image').click(function(){
var img = $('#image');
$(this).hide().next('textarea').show().css({'background':'url('+ img.attr('src') +') no-repeat center center','width':img.width(),'height':img.height()});
});
The answer is yes, image can be placed in textarea.
I placed an animated gif in textarea (worked in ie-6 and ff-13.0.1) with this technique:
Convert any image into a base64 string. (free online converters available, there is a limit to the base 64 file size - around 30k image size); a simple url() background statement did not show image for me.
The online converters usually output both an <img> tag and a CSS background property with the correct values from the uploaded image. Just copy and paste the CSS output into your own file. use url data statement - url(data:image/ext.....)
use the base64 css as a background in the style statement.
to change images, you'll have to change div id="" or class where you have base 64 defined as background-image in the class or id.
time consuming to do conversions so make sure that you really want an image in a textarea before you start.