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>
Related
Just beginning with Bootstrap and have had some success. However, bootstrap classes aren't rendering. What am I missing here?
<div class="position-absolute bottom-0 end-0 border border-dark">
However, using normal CSS styling works as expected.
<div style="position:absolute; bottom: 0; right: 0; border-style: solid;">
See full html code here:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>{{ title }}</title>
</head>
<body>
<!-- <div id="background-div" style="margin-left:10px; margin-right: 10px;"> -->
<div id="background-div" class="position-relative mx-10">
<div id="title-div">
<h1>Title</h1>
<h3>One-liner goes here</h3>
<hr>
</div>
<div id="content-div" style="max-width: 66%;">
<div class="row">
{% block content %}
{% endblock %}
</div>
</div>
<!-- <div style="position:absolute; bottom: 0; right: 0; border-style: solid;"> -->
<div class="position-absolute bottom-0 end-0 border border-dark">
<div id="legend-div">
legend goes here
</div>
<div id="scale-bar-div">
scalebar goes here
</div>
</div>
</div>
</body>
</html>
While using Flask, if you are rendering HTML templates side by side (by running flask application) , you can try a hard refresh by pressing Ctrl+Shift+R (windows) because while using Flask changes in HTML or CSS don't take place immediately even after simple refresh!
OR
You try inspecting your HTML page in the developer's tool.
Opening developer's tool: Ctrl+Shift+J or Right click<inspect page
You can try seeing what CSS have been applied or not!
Found it! The CDN that I used was wrong. For reference, I was using the found on W3Schools (link).
The working CDN to use is this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I realise that this doesn't fix the bootstrap styling (as the classes do not produce the same result as the style attributes), but the main problem of bootstrap simply not working is fixed.
If you're just getting started with Bootstrap, it might be best to start with a current version. v5 is currently in Beta but appears to be quite stable and workable https://getbootstrap.com/
Note, in your answer you are still using an outdated BS, if you want to use v4 start here: https://getbootstrap.com/docs/4.6/getting-started/introduction/
There are a lot of bug fixes from 4.0 > 4.6
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 want the text inside the p header to be centered which is why I am using the text-center bootstrap class, but how would you change the font. Also, how do you edit the already made bootstrap classes in your own css file?
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<p class="text-center">
Welcome to the website!
</p>
</div>
</div>
</div>
Here is the HTML code
make another css file and put it after the bootstrap link
<link rel="stylesheet" type="text/css" href="bootstrap .css">
<link rel="stylesheet" type="text/css" href="new.css">
then overwrite the values that you want
.text-center{
font-family: "Lato";
}
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.
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"/>