Interestingly I came across a web page where it has image ,but when I am able to see the source code I cant see its source, I mean the link to the actual image. since I am developing a webpage (beginner), I would like to know how to achieve. I am not sure whether its an image, or it is coming through CSS.
and the site below
https://www.debuggex.com/pricing
It's not an image but a character specified using CSS:
content: "\f023";
This is achieved using FontAwesome. You can apply classes to elements (in this case, icon-lock) and the styles are automatically applied using this third party open source thingy.
Because this is iconic font design it does not have image
If you like to include your project add css
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Then use class like this
<i class="fa fa-book fa-fw"></i> Library</li>
Refer
http://fortawesome.github.io/Font-Awesome/icons/
http://fortawesome.github.io/Font-Awesome/examples/
In this example it is not an image. The padlock is a font and circle around a style (CSS).
<span class="callout-pic"> <!-- Circle -->
<i class="icon-lock"></i> <!-- Padlock icon -->
</span>
generating image using the base64 encoding,
background: url(data:image/png;base64,.....)
Ref: http://base64img.com/#encode
#GrantThomas is right, Content use in css but basic use call to systems Symbol example Copyright Symbol, Percent Symbol, Left Right Arrow and more work etc. If you want to use this then you do not need any external resource in your page. Simply in your page call font which available in your system and right some code and if you want to some specific symbol then download font.
Example downloaded font :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<title>DingbatsOne Regular Specimen</title>
<style type="text/css">
#font-face {
font-family: 'dingbatsoneregular';
src: url('dingbat1-webfont.eot');
src: url('dingbat1-webfont.eot?#iefix') format('embedded-opentype'),
url('dingbat1-webfont.woff') format('woff'),
url('dingbat1-webfont.ttf') format('truetype'),
url('dingbat1-webfont.svg#dingbatsoneregular') format('svg');
font-weight: normal;
font-style: normal;
}
#target {font-family: 'dingbatsoneregular';}
#target:before {content: "A"; font-size: 200px;}
</style>
</head>
<body>
<div id="target"></div>
</body>
</html>
I am new in CSS and beginner but may be this is helpful to you.
Related
I'm using a CMS and therefore can only amend the CSS file. I have the following code in that file:
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
.h1_section_hero {
Font-family: 'Montserrat';
}
</style>
However it's not changing in the browser. I'm assuming that I don't have to download the font as i'm importing it within the file? thanks
It looks like your google font link is invalid, you are missing a ? between css2 and the family key:
'https://fonts.googleapis.com/css2?family=Montserrat&display=swap'
If you were to open both urls into your browser you will see that your original url is broken, and that the correct one above shows the fonts.
Create a separate link to the stylesheet rather than trying to import. The markup below is taken from the Google Fonts API doc and works just fine in my browser:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Thankyou for your precious time;
i'm a beginner in web development and as i was trying my hands on html and css
i found that the css styling isn't getting applied to the html and that the chrome
developer tools shows it to be empty (the file is present but the code that i've written in css file seems to be absent)
please help!
index.html file
<!DOCTYPE html>
<html>
<head>
<title>MY WEB PAGE </title>
<link type="text/css" href="style.css" rel="stylesheet" >
</head>
<body>
<h1>THIS IS MY WEB PAGE </h1>
<p>
css applied to this part of the code isnt being shown in the developers
tools
</p>
</body>
</html>
style.css file
body{
background-color:black;;
}
h1{
color:white;
font-style: italic;
font-family: sans-serif;
}
p{
font-family: serif;
color:yellow;
font-style: oblique;
}
You may be missing an angle bracket on your first line or it could be a copy-paste error. It should be: <!DOCTYPE html>
Also look in the Network tab in Chrome toolbar to make sure that it's able to find your style.css and it contains the right CSS.
Depending on how it's being hosted, you may have to hit Ctrl-F5 to tell the browser to download everything fresh instead of caching.
Clear the browser cache. It happens sometimes.
https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop
you have to save css and html file in a same folder as your writed
I have downloaded the font-awesome library and linked it to my HTML. Here is the simplest version of my code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="font-awesome.min.css">
</head>
<body>
<div id="content">
<i id="search-icon" class="fa fa-search"></i>
</div>
</body>
</html>
But, what is rendered in the browser is:
What am I missing? I need to get this working in Firefox only.
I would try to set encoding of the page first, and then check if all other files are placed in correct directories as "Copy the entire font-awesome directory into your project" in get started page says.
Firstly, when you inspect your page and click on the font-awesome.min.css file, is it linked correctly.
Secondly are the font and supporting files that come with FontAwesome sitting in the correct folder (relative to your font-awesome.min.css file)?
For example, unless you altered the CSS in the files they gave you, you need to place the /font directory that comes with FontAwesome up a directory from your CSS files.
See the following as an example of how the CSS is referencing the font files.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Steps: Change your href to point to:
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
Download the assets for FontAwesome: http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.2.0.zip
Move both the /css and /fonts folders directly next to your HTML file.
I am trying to use Nastaliq Unicode NFL and the Jameel Noori Nastaleeq fonts for displaying text in Urdu in the browsers. But it isn't displaying properly in any of the browsers.
Please suggest a mechanism through which I can display the text in the same format as is displayed in the below site:
http://www.urdupoint.com/
Thanks,
Waq
here is the code for that font-family:
http://cdn.urdupoint.com/daily/font-styles/nafees_web_naskhshipped.eot
Now, you can use: #font-face to apply this to use own website.
You should have seen this code in the website's HTML Inspector. It was just there at the end of the code.
For #font-face: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
From Notepad++ you can simply write Urdu just like English
<span style="font-size:13px;padding-left:53px; font-family:Nafees Nastaleeq;"><i> براے مہربانی اپنی باری کا انتظار کریں </i></span>
To add other font family,
See this link
http://font.urduweb.org/
Add Jameel Nooriee Css Font Family in css. Then Try it
.urduh {
font-family: Jameel Noori Nastaleeq;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p class="urduh" >زندگی میں بہت سی پریشانیان آ سکتی ہیں</p>
</body>
</html>
I've created a new (simple) website in IIS8. I've created a simple Index.html and put in jQuery, Bootstrap3 and Font-Awesome 4.0.0 to start playing with.
However my Font-Awesome icons show up as nothing (squares):
My folder structure is
/
- Index.html
- bootstrap.css
- bootstrap.js
- jquery-2.0.3.js
/css
- font-awesome.css
/fonts
- FontAwesome.otf
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
My HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="slate.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
</head>
<body>
<div class="container">
<h1>This is a test</h1>
<h1>User Icon: <span class="fa-user"></span></h1>
</div>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</body>
</html>
Font-Awesome #font-face is:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.0.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Chrome shows that no .woff file (or anything) is even downloaded (no 404 either)
I've tried
IE 11, Firefox, Chrome
Putting the site on a live server
Changing MIME type of .woff to
font/x-woff
application/x-font-woff
application/font-woff
font/woff
Full read permissions to the App Pool
Changing the url() of the #font-face from ../fonts/ to fonts/
Removing all other unnecessary css and js files
Full page refreshes, clearing cache
I spent hours on this (too many to admit).
The problem is this code:
<span class="fa-user"></span>
Missing another fa in the class. It should be:
<span class="fa fa-user"></span>
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
import this on your font awesome CSS.
Just had the blank square issue, but this was not the problem with my markup. I'm using wordpress with a social comments plugin which used the same id as my fa icons were located within, and the plugin css overwrote the font-family. So, if your class is correct make sure no other class is highjacking your font-family.
Make sure your i elements have this css styling:
i {
font-family: FontAwesome;
}
Ive just fixed a similar problem - icons showing as squares - with the help of Mikes answer. Turns out I had another instance of FontAwesome being loaded and this was causing issues. When I apply the font family 'FontAwesome' instead of 'Font Awesome Free 5' this fixes the issue. Specifically my problem was encountered when running the WooCommerce Product Search with Avada Theme on Wordpress.