Studying webpages to learn html/css/javascript
Got confused when I thought that most images were linked to or loaded locally... It seems like on spotify their search button is using something I don't understand to load the magnifying glass.
.spoticon-search-32:before {
content: "\f141";
font-size: 32px;
}
If I edit content the picture of the search button goes away so I know its the content that is responsible for the picture. But where the hell is it loading it from? it's not a .png or .jpg extension either...
They are using a font that contains those icons. I don't know which one they are using but here is another example:
http://astronautweb.co/snippet/font-awesome/
element:before {
content: "\f000";
font-family: FontAwesome;
This loads the icon. Now you only have to apply the css selector on a span or i or something else.
It is something called an icon and it is basically a font which is why a size can be specified to make it larger or smaller. I suggest looking at Font Awesome to get a better understanding.
Related
Bit of a strange occurrence with my web page, currently trying to resize the font of a facebook like button I have on my website.
Currently the HTML I'm targeting is:
<span id="u_0_3">2.1k people like this. Be the first of your friends.</span>
In the google chrome console adding either of the following will change the font
1.
#u_0_3 { font-size: 14px }
2.
span#u_0_3 { font-size: 14px }
but adding either of these lines of code to my web pages stylesheet has absolutely no effect. No clue how to proceed from here as it works in one stylesheet and not the other?
The reason the styles aren't updating when adding the code to your stylesheet as opposed to in the browser is because you're trying to a stylesheet on an iframe, which isn't possible. You can however add the styles using jQuery or something along those lines.
Try this...
$("iframe#idhere").contents().find("span#u_0_3").css('font-size', '14px');
Ensure that you have added CSS file reference in your HTML.
Also, clear browser cache and load the page.
I have tried to change font size of jqxtree, but nothing worked.
Below are the tries:
Appliced embbed style for jqxtree div
<div id="jqxTree" style="font-size: 8px;"></div>
Appliced css style for jqxtree div
<div id="jqxTree" class="treeClass"></div>
.treeClass{
font-size: 8px;
}
I googled and found that font size can be changble by custom theme. But I am looking for is there any way just change the font size of jqxtree without using custom theme. I know that custom theme is good option but right now my requirement is very small. As just want to change the font size do I need to load such a big js file and assuming may face any other issues and understanding css code bit stuff.
Url for change font size via custom theme: http://www.jqwidgets.com/community/topic/changing-font/#post-22806
Note: loading data via JSON. I looking to fix this issue by css if possible.
Please help me to fix this issue by simple way. Thanks in advance!!
This issue was resolved.
#jqxTree li{
font-size:8px;
}
Please refer the below fiddle,
http://jsfiddle.net/zp5qeqn5/
Thanks to all!!!
I'm trying to create an iframe target structure, but I'm having some trouble. I can't give an example of the code here, because it just turns into the actual iframe. The problems I've been having are with the font size. I'm using font size="18" but it doesn't work. I've also tried several other methods. The code I use for font color works, so I don't know how to specify the font size. I also want to use a background color on my link to make it appear more like a button but I haven't been able to find a code for that. I'm a beginner and don't know much about coding so be patient with me. Thank you.
If you can modify the iframe source.
You can do it in css like this
.class {
font-size: 18px;
}
or as inline css
<p style="font-size: 18px;">Text here</p>
I need a little assistance with a couple of things.
1) Please click
here
There you will see a Subscribe Now Box. I want this box to move up on the Navigation Bar just beside that Contact Link. But when I move it up, it goes behind that navigation bar and hides itself behind it. I have tried
margin-top:-60px;
then
position:relative;
top:-60px;
None of the both work. Kindly tell me how can I move it up without getting it behind the navigation bar?
Second thing is that you may note that the font of the website looks all torned. How can I fix it? The font that was used in PSD was "Tw Cen MT" but it looks no where near in the web.
Please guide. Any help would be highly appreciated.
Thanks,
Ahmad
Add this to your CSS, then you can move it up with position:relative; top:-60px;
#search-subscribe-area .content-area {
overflow: inherit;
}
The font is your CSS is 'Source Sans Pro';
Try to use Fonts made for the Web
https://www.google.com/fonts
Here you can go and browse for the fonts you like, and tell the designer he should look for fonts there, you can imprt then to your Website using css and you can download it via .zip so the designer can use the same Font in Photoshop as you see it in the Web
I am managing my school's website (mpkosis28.com) with NO prior programming experiences. If any, I'm just a 15yo computer technician.
I made a subdomain: http://28cup.mpkosis.com/index.html (yes, I really need to learn php to get rid of html files. And some graphic designing as well.) and I need to put an image behind the content. Something like twitter's background which is shown around the twitter feed.
I can't copy my css code, because I am confused with the formatting here, but here it is.
EDIT: putting a background on the white bars on the side. Like a floating page container with an image behind it.
You probably just need to add the image to the body tag, like this:
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: url(path/to/image/file.jpg);
}
The white bars is just a default page background. Use the above code in your css and make the path correct and it will work