I have searched all over the internet searching for answers to why no matter what I do glyphicons just won't show up for me. They only show as a little square "[]".
I have made sure that I am linked to the correct path. and have all the files in my project like the other forum posts have said and I even tried to change the font-family like someone suggest but nothing changes.
Am I missing something? Can someone explain the fix to me in the simplest of terms? I am very new to HTML and CSS still and get confused quite easily!
.main{
overflow: auto;
background: url(portal.png), black;
max-width: 100%;
min-height: 900px;
background-size: cover;
background-position: center;
}
.main-nav{
text-align: right;
margin: 50px 50px 0 0;
}
.main-nav li{
display: inline;
text-align: center;
padding: 20px;
font-size: 22px;
}
.main-nav li a{
color: #A8F766;
text-decoration: none;
}
.main-nav li a:hover{
color: #fff;
text-decoration: none;
border-bottom: 2px #A8F766 solid;
}
.main-text h1{
text-align: center;
margin-top: 150px;
color: #fff;
font-size: 70px;
}
.fa-bath{
font-size: 90px;
color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Practice</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<nav>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="main-text">
<h1>Placeholder.<i class="fa fa-gamepad"></i><br>Placeholder.<br>Placeholder.</h1>
</div>
</div>
</body>
</html>
This looks like path issue. Does all your .css files stored in single folder or different folders? If they are stored in different folders can you please list the folder structure for .css files?
Also, just wanted to point out an alternative approach using BootstrapCDN to directly link the css file.
For example, following worked for me:
.fa-gamepad {
color:blue;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>Game pad</h1>
<i class="fa fa-gamepad fa-5x"></i>
</body>
Related
Hi I'm making a website but I'm having two problems
My HTML file doesn't see my CSS file. My Html file is Website/html/index.html and my CSS file is Website/css/index.css
Even though i do text-align: center;(CSS file line:22) my list doesn't become straight line
My Html code
<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" />
<title>KK Kiralama</title>
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk_nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
My Css code
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
html{
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
}
.kk-nav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Thanks for any help!
Also, I'm open to any advice on making this code more smooth.
First of all, try adding two dots to your CSS path. href="../css/index.css"
Then for the alignment, add display: flex; to the kk-nav shown below.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
html{
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
display: flex;
}
.kk-nav li a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
In CSS you are using class .kk-nav but you have defined the class="kk_nav"
please replace the hyphen(-) sign with underscore sign(_) then your CSS with work.
The corrected code is here
.kk_nav{ /* using underscore */
overflow: hidden;
background-color: #191970;
}
.kk_nav a{ /* using underscore */
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
and if you want to make nav text in the center use li in CSS not a
like
.kk_nav li{ /* using li not a */
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Your HTML file doesn't see your CSS file because you haven't given him the good path to the CSS file. Both your files are inside Website folder, but in two different separate folders. So you need to tell HTML to return to its root/parent folder (Website) and from there to enter css folder where he'll find CSS file. You do that with ".."
<link rel="stylesheet" href="../css/index.css">
You made an error. In HTML you named your class "kk_nav" with an underscore and in CSS you called that class with a hyphen insted of underscore. Change it and it should work. And if it doesn't, then call li instead of a in CSS:
.kk_nav li {}
I'm seeing your CSS file just fine when I load it on my machine. Alternatively, in your case, if your current path isn't working for you can set the path like this for example <link rel="stylesheet" href="./css/index.css">. I will mention this is the same method as your current path except you're just adding '.' in front of your current file path. This will tell your HTML file to look for the file you need in the 'CSS' folder in the same directory level as your HTML file (assuming you have your HTML file in the root of your working directory).
In your CSS file you have kk-nav as your class name but in your current HTML file, you set the class as kk_nav. The only other note I really have is I see that you're defining your font size in the 'HTML' tag of your CSS, by default that is set to 16px, if I recall correctly. If you want a bigger font for your code I would suggest the using body element as the best practice. for example: body {font-size: 20px;}
I hope this helps.
This is the updated HTML code I used on my machine
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
}
.kk-nav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<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" />
<title>KK Kiralama</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="nav">
Ana Sayfa
abc
Araçlar
İletişim
Giriş
</nav>
</div>
</header>
</body>
</html>
Hello Stack Overflow Community,
I would like to ask for help regarding my concern on CSS not showing in my HTML Display. I am still new to the Programming World. Please bear with me. I am doing a tutorial course in HTML YouTube by PinoyFreeCoder.
Here is the HTML that I made:
<title>PinoyFreeCoder Blog</title>
<style type="text/css">
body{background-color: #F5F5F5; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding:10px 10px 10px 10px;
font-family: sans-serif;}
</style>
<link rel="icon" href="Images/John Canero Logo.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="Style.css">**
</head>
<body>
<header id="main header">
<h1>PinoyFreeCoder.com</h1>
</header>
Here is the Style.css that I made:
*{
font-family: Arial, Helvetica, sans-serif;
}
#main-header{
text-align: center;
background-color: black;
color: white;
padding: 10px;
}
Thank you!
Here if you are applying styling in HTML page itself. Then, whatever CSS you want to give to your webpage you can mention it betweeen <style></style> tag.
<title>PinoyFreeCoder Blog</title>
<style>
body{background-color: red; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding:10px 10px 10px 10px;
font-family: sans-serif;}
</style>
<body>
<header id="main header">
<h1>PinoyFreeCoder.com</h1>
</header>
</body>
And if you are using external CSS then you have to attach the <link rel="stylesheet" href="styles.css"> between your <head></head> tag. Then only all the CSS written in your external stylesheet will be applied.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<h2>I am formatted with a linked style sheet.</h2>
<p>Me too!</p>
</body>
</html>
styles.css
body{
background-color: red;
}
I am using bootstrap 4 to style my html pages. And i am using font awesome to add social media icons on the webpage too.
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset = 'utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>
Page Title
</title>
<style>
body {background-color: lightcyan}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.6;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
</style>
</head>
<body>
<div class = 'container'>
<div class = 'row'>
<div class = 'col text-center'>
</div>
</div>
</div>
</body>
</html>
But when i import the bootstrap4 library, the social media icons shape distorts.
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset = 'utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>
Action Page
</title>
<style>
body {background-color: lightcyan}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.6;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
</style>
</head>
<body>
<div class = 'container'>
<div class = 'row'>
<div class = 'col text-center'>
</div>
</div>
</div>
</body>
</html>
I dont understand what the problem here is.
Can somebody please help me solving this problem...
Thanks in advance ! :)
If you use chrome inspect tools and play around with switching off css and changing the values for display or position etc.. You will see which rule is breaking it. I found changing these fixed it:
.fa-linkedin, .fa-youtube {
display: inline;
}
(hint: in the dev tools it also tells you which css file is causing the changes, i think it was font-awesome here)
I have two headers, one with class="mainHeader", and another with class="subHeader". I'm trying to contain both of those in another class by using <div class="header"> beforehand (and a </div> after of course). However in my CSS file that I linked, when I try to do .header { /* styling */ }, no matter what I put in there nothing changes when I open the HTML file.
Here are my files:
<!DOCTYPE css>
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
As you can see when you run it, no styling made in the ".header" is used. I'm still pretty new to this so please understand if it's an easy fix!
You don't define a doctype for CSS files, remove <!DOCTYPE css>.
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
DOCTYPE declarations are for HTML based documents.So remove <!DOCTYPE css> from your css file.
Make sure file path for css file is correct.
Remove <!DOCTYPE css> from your css file. DOCTYPE declarations are for HTML based documents.
The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
HTML:
<!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">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.