i been work on php Template (.dwt.php) and in the header i put fontawsome css
but the font awesome not work whatever i do i try change fonts paths and its not work here code of the php template
<?php
require "header.php";
if(!$_SESSION['UserAssoc']['Administrator']) Redirect("home.php", "Insufficient Privileges");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>NOMS</title>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen" />
<link href="css/thin-admin.css" rel="stylesheet" media="screen" />
<link href="css/font-awesome.css" rel="stylesheet" media="screen" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/dashboard.css" rel="stylesheet" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/smooth-sliding-menu.js"></script>
</head>
and here my fontawsome.css file
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'),
url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),
url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
and i have all this fonts in folder called fonts and the fontawsome.css in the css folder can anyone please help?
You don't need to load FontAwesome like that; you can just use the stylesheet. Don't need to use fontface:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Related
I am using the html5blank to create a site on WordPress. Locally, the media queries are working perfectly fine but when and I add them to the wordpress style.css file, they don't seem to work. I have got rid of all media queries and kept only a simple one just to test it and it's still not working. I have my media queries at the end.
This is part of my header.php file:
<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<link href="//www.google-analytics.com" rel="dns-prefetch">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/style.css" />
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/favicon.ico" rel="shortcut icon">
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/touch.png" rel="apple-touch-icon-precomposed">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php wp_head(); ?>
<script>
// conditionizr.com
// configure environment tests
conditionizr.config({
assets: '<?php echo get_template_directory_uri(); ?>',
tests: {}
});
</script>
</head>
<body <?php body_class(); ?>>
<header>
These are the simple media queries I added for testing in Wordpress to the bottom of the css file, but are not working:
#media screen and (min-width: 600px) {
div.balancepersonal {
font-size: 100px;
}
}
#media screen and (max-width: 600px) {
div.balancepersonal {
font-size: 10px;
}
}
This is the p tag in the index.php file I'm trying to make responsive:
<div class="balance-personal">
<div class="balance-container">
<div class="top-div-balance">
<img src="img/IMG_6739.jpg" class="trees-photo">
<div class="trees-shadow">
<div class="container amenidades-txt">
<p class="balancepersonal">BALANCE PERSONAL</p>
You want the stylesheet_url param for bloginfo as seen here: https://developer.wordpress.org/reference/functions/get_bloginfo/
Reason: your current param gives location on the server file directory as opposed to a web location a browser can access.
Edit stylesheet_url should give you the complete location to your style.css.
Alternatively you could use the template_directory_uri (as you are elsewhere) and add the style.css part
I just now"run code snippet"here on stackoverflow and css works but when i open the index.html doc in my folder it wont show any color, weird. can someone pleas help thanks.
h1 {
font-size: 50px;
}
a {
text-decoration: none;
}
.thumbnail-title {
background: rgb(96, 125, 139);
color: rgb(202, 238, 139);
display: block;
font-size: 50px;
margin: 0;
padding: 4px 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheets" href="styles.css">
<h1>ottergram</h1>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
</html>
You have a typo right there: <link rel="stylesheets" href="styles.css">
it's rel="stylesheet" without the letter "s" not like you did rel="stylesheets".
So simply take this one: <link rel="stylesheet" href="styles.css">.
<link rel="stylesheets" href="styles.css">
stylesheets wont work, only stylesheet!
<link rel="stylesheet" href="styles.css">
Please change your external css reference with this one.
If you do not use the canonical links to downloadable resources, be sure that the paths of the downloaded files and your current URL are written correctly.
For example:
Current URL:
http://exapmle.com/test/
Use ..
<link rel="mask-icon" href="../safari-pinned-tab.svg" color="#5bbad5">
Use full URL:
http://exapmle.com/test/
<link rel="mask-icon" href="http://exapmle.com/safari-pinned-tab.svg" color="#5bbad5">
When I use pgp require it moves the head content on the included file into the body tags, I've explored questions somewhat related to my problem but none have solved my problem.
index.php:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
<?php
require '/home/sethfreeman/public_html/subdomains/gwd/navigation/header/header.html';
?>
Included File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/css/header.css" type="text/css">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap-responsive.css" media="screen">
</head>
<body>
<div class="container"></div>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/js/jquery-3.1.1.js"></script>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Chrome Output:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/css/header.css" type="text/css">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap-responsive.css" media="screen">
<div class="container"></div>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/js/jquery-3.1.1.js"></script>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
"Require isn't smart. It's simply going to dump the contents of the required file where it's invoked. If you want some code in the head portion, put that in a separate file and require it in the correct place." - Major Productions LLC
To close this question.
I have copied my assets folder to public and called my css files using
<link href="{{!! asset('assets/global/plugins/font-awesome/css/font-awesome.min.css') !!}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/global/plugins/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css" />
but when I open my local host to view my app the css does not working and when I check the css using inspect element it shows this error
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Object not found!</title>
<link rev="made" href="mailto:postmaster#localhost" />
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
body { color: #000000; background-color: #FFFFFF; }
a:link { color: #0000CC; }
p, address {margin-left: 3em;}
span {font-size: smaller;}
/*]]>*/--></style>
</head>
<body>
<h1>Object not found!</h1>
<p>
The requested URL was not found on this server.
The link on the
<a href="http://localhost:7777/laravel/resources/views/login.blade.php">referring
page</a> seems to be wrong or outdated. Please inform the author of
that page
about the error.
</p>
<p>
If you think this is a server error, please contact
the webmaster.
</p>
<h2>Error 404</h2>
<address>
localhost<br />
<span>Apache/2.4.16 (Win32) OpenSSL/1.0.1p PHP/5.6.12</span>
</address>
</body>
</html>
First you put all your css and js file inside public folder.
ie, wamp->www->your project folder->public.
then in the coding section simply use the below mentioned technique.
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jquery.datetimepicker.css"/>
<script type="text/javascript" src="../select/select2.min.js"></script>
<script type="text/javascript" src="../select/select2.js"></script>
<link href="../select/select2.css" rel="stylesheet">
Add a slash to the beginning of your assets urls:
<link href="{{!!asset('/assets/global/plugins/font-awesome/css/font-awesome.min.css') !!}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('/assets/global/plugins/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css" />
I am trying to tidy up a header in netbeans 8.0 which I am using as part of a view. The editor is underlining:
<link href="<?=base_url('css/bootstrap.css')"></link>
Please see screenshot. Why? what am I doing wrong?
The full code for my header is:
<head>
<base href="<?=base_url();?>">
<meta charset="utf-8">
<title>Your Contacts</title>
<meta name="description" content="manage your contacts with name, email and phone">
<meta name="author" content="yubi4dition">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="<?=base_url('css/bootstrap.css')"></link>
<link rel="stylesheet" type="text/css" ></link>
<link href="<?=base_url('css/yourcontacts.css')?>" rel="stylesheet" type="text/css" ></link>
<link href="<?=base_url('css/font-awesome.css')?>" rel="stylesheet" type="text/css" ></link>
<link href="<?=base_url('css/tablesorter.css')?>" rel="stylesheet" type="text/css" ></link>
<!-- Le fav and touch icons -->
<link href="<?=base_url('css/ico/favicon.ico')?>" rel="shortcut icon" ></link>
<link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css"></link>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"></link>
</head>
Try
<link href="<?=base_url('css/bootstrap.css') ?>"></link>
you seem to lack the closing tag.
Missing the closing PHP tag :)