Having some difficulties with Font Awesome and was wondering if anyone could point me in the right direction? This is what I have
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div class="sectionTitle">
<div class="section colour1">
<i class="fa fa-camera-retro fa-3x">Camera 3px</i>
</div>
</div>
</body>
When the page is then rendered however the camera icon is not appearing, although the Camera 3px text is. I'm sure I've overlooked something fundamental here. Any thoughts at all on this would be great.
Thanks
It is loading here:
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div class="sectionTitle">
<div class="section colour1">
<i class="fa fa-camera-retro fa-3x">Camera 3px</i>
</div>
</div>
</body>
http://jsfiddle.net/CLVx4/
Guess you did it all correct.
Your code looks correct so I think the problem is elsewhere.
If you are viewing the page through file:// URI scheme, rather than http://, the link to the external CSS file will not work without specifying http:// explicitly in the link url, this has caught me out plenty of times. May be worth changing the link to:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
Related
I have a problem My web app can't recognize the icons that I put with font-awesome, I dont know why. I have in my index.html in the header this:
<link rel="stylesheet" href="\~/lib/font-awesome/css/all.min.css"/>
<link rel="stylesheet" href="\~/lib/font-awesome/css/fontawesome.min.css"/>
Also have in my index.html:
<script src="\~/lib/font-awesome/js/all.min.js"></script>
<script src="\~/lib/font-awesome/js/fontawesome.min.js"></script>
In the component where I call the icon I have:
<div class="row g-3 ">
<div class="col-auto"><i class="fa-solind fa-circle-user"></i></div>
</div>
Is someone knows, why it does not work? I've tried everything and it doesn't work
I'm not sure which version you're using and if you are only allowed to use free icons.
The icons you use fa-solind and fa-circle-user cannot be found. Below an example with a free icon using version 5.15.4. Maybe it helps for you to find where you go wrong.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="row g-3 ">
<div class="col-auto"><i class="fas fa-user"></i></div>
</div>
I am making a website by watching this video: https://www.youtube.com/watch?v=oYRda7UtuhA&t=490s. timing: 25:10. I did as shown in the video, but the icons on the site are not displayed for me. When I add these commands, my section texts are moved to the center. and there are no icons. I looked on the Internet to solve this problem, but I did not find anything.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InkoGreat Website - Everything about programming</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Anek+Odia:wght#100;300;500;700;800&display=swap" rel="stylesheet">
<link rel="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-
free#5.15.4/css/fontawesome.min.css">
</head>
<body>
<section class="header">
<nav>
<img src="images/profile-logo.jpg">
<div class="nav-links">
<i class="fa-solid fa-xmark"></i>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>COURSE</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<i class="fa-solid fa-bars"></i>
</nav>
<div class="text-box">
<h1>Welcome to InkoGreat's website!</h1>
<p>This site publishes useful programs for programming,
new chips, tips and much more!<br>Python/HTML/CSS/JavaScript</p>
Visit Us To Know More
</div>
</section>
</body>
</html>
Change your font-awesome cdn url to https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css. The link used by you seems to be invalid. Changing the link should solve your issue
This thing has happened multiple times to me. Most of the time, when using Edge, it does not display the icons.
This is probably a compatibility issue. So you are recommended to remove the line
<link rel="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome- free#5.15.4/css/fontawesome.min.css">. As a developer, a more recommended way is to go to https://fontawesome.com/start (The latest version of FontAwesome) and create an ID. There, you will have more customisability to your icon pack and hence, make your icon pack light. You will also be provided with an option to add a js file in the HTML file which works without any problems.
I am learning how to add Icons to my HTML and there is an example of it from W3 Schools like this :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Which is pretty much to link the stylesheet and be able to enter the icons from Font awesome page. However I do not like the messy way of adding it directly to the HTML . Is there an easier way for beginners to add Icons to the actual CSS instead of the body directly ?
Thank you ,
The easy way is to use fa icons
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>
I am learning web development and i need advice.
I have bootstrap card and i want to align the minus-square icon from font awesome to right but nothing work.
Do you have some ideas?
Thanks for everything! I am also sending picture to good imagine.
if you are using bs4, you could use the float-right class.
Demo working snippet:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-body">
Basic card
<i class="some-fa-icon float-right">♠</i>
</div>
</div>
</body>
</html>
Please note that instead of the icon I have used a html unicode character and mentioned some-fa-icon class which would be replaced by your actual font awesome classes.
I'm totally new in html and planned to design a personal web page. The following is the code I wrote. Everything is fine and the only problem I have is about two icons I used: icon-user and icon-book. The problem is that it does not show up in the page.
<!DOCTYPE html>
<html class=" js no-touch csstransitions" style="" lang="en"><head>
<title>Vahid: Homepage</title>
<!--CSS styles-->
<link rel="stylesheet" href="Vahid%20::%20Homepage_files/bootstrap.css">
<link rel="stylesheet" href="Vahid%20::%20Homepage_files/font-awesome.css">
<link rel="stylesheet" href="Vahid%20::%20Homepage_files/perfect-scrollbar-0.css">
<link rel="stylesheet" href="Vahid%20::%20Homepage_files/magnific-popup.css">
<link rel="stylesheet" href="Vahid%20::%20Homepage_files/style.css">
<link id="theme-style" rel="stylesheet" href="Vahid%20::%20Homepage_files/default.css">
<!-- bxSlider CSS file -->
<link href="Vahid%20::%20Homepage_files/jquery.css" rel="stylesheet">
</head>
<body data-twttr-rendered="true">
<div id="wrapper">
<i class="icon-reorder"></i>
<div id="sidebar">
<div class="ps-container" id="main-nav">
<div id="nav-container">
<div id="profile" class="clearfix">
<div class="portrate hidden-xs"></div>
<div class="title">
<h2>Vahid</h2>
</div>
</div>
<ul id="navigation">
<li class="currentmenu">
<a href="Vahid :: Homepage.html">
<div class="icon icon-user"></div>
<div class="text">About Me</div>
</a>
</li>
<li>
<a href="Vahid :: Research.html">
<div class="icon icon-book"></div>
<div class="text">Research</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<iframe style="display: none;" allowtransparency="true" scrolling="no" id="rufous-sandbox" frameborder="0"></iframe></body></html>
and both icons are clearly defined font-awesome.css
.icon-user:before{content:"\f007";}
.icon-book:before{content:"\f02d";}
It would be great if you guys can help.
<i class="fa fa-book"></i>
to simplify Kamils response.
You can place i into another div, you will have less issues that way.
EX: <div class="text"><i class="fa fa-book"></i> About Me</div>.
Copy and paste that. I recommend you always use the i tag to place icons. You can place them in most html tags such as headers.
<h1><i class="fa fa-magnet"></i> This is a magnent</h1>
Check out http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ for an alternative methods.
If you are new to bootstrap, check out http://bootsnipp.com/
This is a great reference for code snippets.
If you are using Bootstrap 3, check out this link http://getbootstrap.com/components/
You will read about glyphicons here.
Glyphicons now come with Bootstrap and you may find glyphicons more appropriate at times.