Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm adding fontawesome icons in my page, but these icons are not working, although I added a cdn link in my file:
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-6">coyright#2021 company name</div>
<div class="col-md-6">
<ul id="social-icons" class="float-md-right">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
In the <head> of your html, reference the location to your font-awesome. min. css. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
stackoverflow is sandboxed and won't load the fonts. Try your code in jsfiddle. https://jsfiddle.net/a9jvfebw/
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-6">coyright#2021 company name</div>
<div class="col-md-6">
<ul id="social-icons" class="float-md-right">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
You forgot to include the font family:
CSS:
body {
font-family: 'Font Awesome', sans-serif;
}
To use the Font Awesome icons, add the following line inside the head section of your HTML page.
<!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>
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-6">coyright#2021 company name</div>
<div class="col-md-6">
<ul id="social-icons" class="float-md-right">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Try this code. And check it once again, where you have added tag.
In order to access the Font Awesome library, you will need to request it from eighter downloading it to your local machine or via using cdn. In both ways you will need to connect it to your HTML document by specifying the link to the external file in your <head> tag. It should look like this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-6">coyright#2021 company name</div>
<div class="col-md-6">
<ul id="social-icons" class="float-md-right">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Note: The href attribute of a tag may not be empty. It is required to have a value of eighter a link, javascript:void(0) or a # sign in order to be a valid HTML, as well as the <html> tag has to have a mandatory lang attribute.
Related
I am learning web design and i have a very simple issue that i haven't been able to find an answer to. I created a very simple page for an example and both documents are in the same folder. it works as a snippet on here, but then it doesn't work on my computer. I have checked the filepath for the stylesheet several times, but it doesn't work. If anyone can help that would be very appreciated. Thanks!
(im not sure if the snippet is useful but i thought i would include it anyways)
body {
background-color: #eee;
}
#header {
background-color: #66CCFF;
color: white;
}
<div id="container">
<div id="header">
<h1>text</h1>
</div>
<div id="content">
<div id="nav">
<h3>nav</h3>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="main">
<h2> other text </h2>
</div>
</div>
</div>
This mainly has to do with the path of the file. Try this:
href="./style.css"
If that doesn't work show us the error you get
Just remember to follow this, to avoid again issue in case of accessing through parent directory:
parent folder:
<link rel="stylesheet" type="text/css" href="../style.css" />
same folder:
<link rel="stylesheet" type="text/css" href="./style.css" />
I am working on creating a website with 000webhost.com. I made it entirely with HTML and CSS. I have a problem. If I run my website by simply opening the index.html file from my computer, he does it perfectly. the download button works whatsoever. but if I 'm going to hightechprogramming15.netne.net and I click on the download button, it downloads a different file called download.htm. Can anyone help me? Thanks in advance!
Here is my code:
<html>
<head>
<title>HighTechProgramming15</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>HighTechProgramming15</h1>
<link rel="stylesheet" type="text/css" href="style.css">
</div>
<div id="content">
<div id="nav">
<h3>Navigation</h3>
<ul>
<li>Home</li>
<li><a class="selected" href="Page2.html">Downloads</a></li>
<br />
Link to my YouTube channel
</ul>
</div>
<div id="main">
<h2>Downloads Page</h2>
MessageBox Generator
<br />
</div>
</div>
<div id="footer">
Copyright © 2016 HighTechProgramming15
</div>
</div>
</body>
I had the same problem i think you'll have to put MessageBox%20Generator.exe in place for MessageBox Generator.exe and Maybe you'll have to put download attribute i
I need to scrape some data from a website which has a very badly structured HTML document, so XmlService.parse() fails to parse it.
Here's how the "document" looks like, I have stripped off a lot of lines, but have kept the structure:
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title> Funny Site </title>
</head>
<body>
<!DOCTYPE html>
<html>
<title> Funny Site</title>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="mainhead">
<div class="leftHead">
</div>
<script>
$(document).ready(function(){
//$( ".overlay" ).show();
});
</script>
<div class="contain">
<div class="maine">
</div>
<div class="maine2">
<div class="footer1">
<div class="footer2">
<div class="data">
<div class="dc">
<div class="smalltxt">Field1</div>
<div class="largetxt">value1</div>
</div>
<div class="dc">
<div class="smalltxt">Field2</div>
<div class="largetxt">value2</div>
</div>
<div class="dc">
<div class="smalltxt">Field3</div>
<div class="largetxt adjFont" id ="someId">value3</div>
</div>
<div class="dc" >
<div class="smalltxt">Field4</div>
<div class="largetxt adjFont">value4</div>
</div>
<div class="dc" style="border:none;">
<div class="smalltxt">Field5</div>
<div class="largetxt">value5</div>
</div>
</div>
</div>
</body>
</html>
The data I would like to grab is in the div with class data, value1 through value5.
How can you at least grab the data class? The only thing I could come up with is to apply regular expressions, but is there a better way than that?
You could try implementing XSLT.
From wikipedia:
XSLT (Extensible Stylesheet Language Transformations) is a language
for transforming XML documents into other XML documents, or other
formats such as HTML for web pages, plain text or into XSL Formatting
Objects.
You can use this to remove or change attributes, values, or even elements which you want to modify.
You can check out the tutorial and testers at the infamous w3schools site
I have the following html code, I am not able to place the divs in a single row. Not sure what I am doing wrong here.
<!DOCTYPE html>
<html>
<head>
<title>Hey there!</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class=".col-md-4">Hello</div>
<div class=".col-md-8"><h1>How are you?</h1></div>
</div>
</div>
</body>
</html>
Try
<div class="row">
<div class="col-md-4">Hello</div>
<div class="col-md-8"><h1>How are you?</h1>
</div>
The "." is used for a selector, not when writing the class name
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.