<div class="col-md-12">
<div style="margin-top: 5px">
<label>
<a href="#"><i class="fa fa-comments" aria-hidden="true"></i>
Chat with #Model.MemberFirstName</a>
</label>
<label>
<a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>
Send Friend Request</a>
</label>
</div>
</div>
Writing this code, I am using 2 font awesome icons. My first icon is showing on my output screen but 2nd one is not showing. I have written same code for 2nd. I also try removing the first one, The second still not show.
Here is the output atatched.
font-awesome v4.0.0 doesn't contain fa-user-plus class. Use font-awesome v4.7.0
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div style="margin-top: 5px">
<label>
<a href="#"><i class="fa fa-comments" aria-hidden="true"></i>
Chat with #Model.MemberFirstName</a>
</label>
<label>
<a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>
Send Friend Request</a>
</label>
</div>
</div>
As per your question your are using fontawesome 4.0.0 version but fa-user-plus has come in fontawesome 4.3. Check updated snippet below with latest version
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="col-md-12">
<div style="margin-top: 5px">
<label>
<a href="#"><i class="fa fa-comments" aria-hidden="true"></i>
Chat with #Model.MemberFirstName</a>
</label>
<label>
<a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>
Send Friend Request</a>
</label>
</div>
</div>
Related
If in my HTML file, Font Awesome icons are showing up as blank squares in all browsers, even though I've linked the stylesheet correctly and I've tried to install the package using npm, but it throws a npm ERR! code E401. I've also checked the browser developer console for error messages, but there are no errors being displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<title>EVERYTHING CHEMISTRY</title>
</head>
<body>
<div class="Grid-container">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<i class="fa-solid fa-bars"></i>
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3 id="Website name">EVERYTHING CHEMISTRY</h3>
<img id="Logo" src="icon.png" alt="Hydrogen atom">
<img id="Chemistry Lab" src="Chemistry.JPG" alt="Chemist Lab">
<!-- The form -->
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="Page Title">
<h1 id="name">Periodic</h1>
<h1 id="subname">Table</h1>
</div>
<div class="Subheading">
<h2 id="Subheading 1">118 Elements</h2>
<h2 id="Subheading 2">7 Periods</h2>
</div class="Body text">
<p id="Translations">{Eng: Periodic Table; Arabic: الجدول الدوري; Afrikaans: Periodieke tabel; Mandarin: 周期表
(zhōuqī biǎo); Urdu: پیرودیک ٹیبل.}</p>
<p id="Definition">The periodic table is a tabular arrangement of the chemical elements, organized on the basis
of their atomic number, electron configurations, and chemical properties. Elements are presented in rows
(called periods) and columns (called groups or families) according to their increasing atomic number. The
elements in a group have similar chemical and physical properties, and those in a period show a progression
of properties as the atomic number increases. The table provides a useful summary of the properties of the
elements and their chemical reactivity. It is widely used in chemistry and other sciences to predict the
properties and behavior of elements and their compounds.</p>
Click Here to Smoothly Scroll Down
<i class="fa-solid fa-angle-down"></i>
<div id="down">
<h1>You are down!</h1>
</div>
</div>
</body>
</html>
The class names that you are using are for fontawesome v6 and you are including an older version v5 in your project, make sure you copy the icons classes for the version that you are using
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="Grid-container">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<i class="fa-solid fa-bars"></i>
Link 1
</div>
</div>
</div>
<h3 id="Website name">EVERYTHING CHEMISTRY</h3>
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<i class="fa-solid fa-angle-down"></i>
this is the link for v5 icons
https://fontawesome.com/v5/search?o=r&s=regular
How can I get the icons within the tabs section to appear on the live open server? I tried with the code below:
Loading the styles:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-o53vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK10YPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="netflix.css" type="text/css">
And here are the tabs:
<section class="tabs">
<div class="container">
<div id="tab-1" class="tab-item tab-border">
<i class="fas fa-door-open"></i>
<p class="hide-sm">Cancel at any time</p>
</div>
<div id="tab-2" class="tab-item">
<i class="fas fa-tablet-alt fa-3x"></i>
<p class="hide-sm">Watch anywhere</p>
</div>
<div id="tab-3" class="tab-item">
<i class="fas fa-tags fa-3x"></i>
<p class="hide-sm">Pick your price</p>
</div>
</div>
</section>
fontawesome now uses <script instead of link so the link I was using was outdated. This has now been fixed to the below.
output:Screen shot of browser
<!-- Add icon library -->
<html>
<body class="body">
<center>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
<img src="{{url_for('static', filename='file:/omkar.png')}}align="middle" />
<h1>Omkar More</h1>
<p class="title">Student DYPSOEA</p>
<p>PUNE UNIVERSITY</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
<
</div>
</center>
</body>
</html>
The code from above gives only symbol of image not shows it
try closing the img src attribute.
you are missing closing " and space before align="middle"
see below html
<img src="{{url_for('static', filename='file:/omkar.png')}}" align="middle" />
Check this out:
and you have incorrect syntax of img tag, here is the correct one.
<img src="{{url_for('static', filename='file:/omkar.png')}}" align="middle" />
<html>
<body class="body">
<center>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
<img src="http://placekitten.com/301/301" align="middle">
<h1>Omkar More</h1>
<p class="title">Student DYPSOEA</p>
<p>PUNE UNIVERSITY</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
</div>
</center>
</body>
</html>
I want to place some text in the middle of an icon and an image. Somehow it is not quite working out. I can't seem to get everything nice and lined out.
Here is my code:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-12">
<div class="col-md-10">
<div class="span6">
<img class="companyIcon" src="http://findicons.com/files/icons/766/base_software/128/circle_blue.png" />
</div>
<div class="companyTitle span3">
<p>Coinchase<i class="fa fa-edit" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</p>
</div>
</div>
<div class="col-md-2">
<p>Back to results <i class=" fa fa-mail-reply " aria-hidden="true"></i>
</p>
</div>
</div>
</div>
Try this below
.col-md-10 {
float: left;
}
.col-md-10 .span6 {
display: inline-block;
}
.col-md-2 {
float: right;
}
.companyTitle.span3 {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-12">
<div class="col-md-10">
<div class="span6">
<img class="companyIcon" src="http://findicons.com/files/icons/766/base_software/128/circle_blue.png" />
</div>
<div class="companyTitle span3">
<p>Coinchase<i class="fa fa-edit" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</p>
</div>
</div>
<div class="col-md-2">
<p>Back to results <i class=" fa fa-mail-reply " aria-hidden="true"></i>
</p>
</div>
</div>
</div>
I am having this following code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accueil</title>
<link rel="stylesheet" href="css/header-search.css" />
<link rel="stylesheet" href="css/header.css" />
</head>
<body>
<header class="header-two-bars">
<div class="header-first-bar">
<div class="header-limiter">
<h1>Jeannot<span>Boutique</span></h1>
<div class="member-area-buttons">
Sign Up
Log In
</div>
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
<div class="clear"></div>
</div>
<div class="header-second-bar">
<div class="header-limiter">
<nav>
<i class="fa fa-male"></i> Accueil
<i class="fa fa-female"></i> Chaussures
<i class="fa fa-folder-o"></i> Vêtements
<i class="fa fa-pencil"></i> Accessoires
<i class="fa fa-check"></i> Sur mesure
<i class="fa fa-pencil"></i> Blog
<i class="fa fa-check"></i> Promo
</nav>
<div class="nav-social-media">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-instagram"></i>
</div>
<div class="clear"></div>
</div>
</div>
</header>
</body>
Basically, I am have a folder where my css files are. When I load the file header.css from the css folder, it does not have any effect, but once is in the same location with the index.html, everything is perfect.
I have struggling to find the answer but no way.
My file system structure is the following:
Please kindly help me find out what is wrong with my code.
PS: I have used the W3 Validator and everything is ok.
https://stackoverflow.com/a/9480801
Add
type="text/css"
to your link tag
While this may no longer be necessary in modern browsers the HTML4
specification declared this a required attribute.
and you may try this:
specify href="./style.css" which the . specifies the
current directory
Use
<link rel="stylesheet" href="/css/header-search.css" />
<link rel="stylesheet" href="/css/header.css" />
instead of
<link rel="stylesheet" href="css/header-search.css" />
<link rel="stylesheet" href="css/header.css" />