Just started using font-awesome and all my images appear as squares if I use the font-awesome css locally. My code is straightforward:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />
<link rel="stylesheet" type="text/css" href="font-awesome.css"/>
</head>
<i class="fa fa-truck"></i>truck
I put the font files in ../fonts/ as it says in the font-awesome.css. I also put the fa which is particular to version 4.0, and I also tried the CDN. However, with the CDN, I don't even get a square, I just get a blank. Anyone have any idea?
Thanks!
Related
I have a Bootstrap image slider in my project, I only need the bootstrap js and css file for that slider. Everything works fine till I publish my site online. Then the imageslider is nowhere, the images aren't shown, just a white space.
I included jquery and popper because I read that is necessary but still it does not work. Why is that?
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script defer src="./scripts/popper.min.js"></script>
<link href="./styles/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="./styles/reset.css" type="text/css" rel="stylesheet" />
<link href="./styles/allstyles.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="shortcut icon" href="./img/huisstijl/logo.png" type="image/x-icon">
<script src="./scripts/bootstrap.bundle.min.js"></script>
I'm receiving an error in my angular 2 project where in the chrome developer tools console there is a message saying GET http://localhost:4200/styles.css with a red x to the left of it. I'm able to use these styles though so what's the deal?
This is my index.html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scorekeeper</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Remove that link to your stylesheet from your index.html. You're using the angular-cli and in your configuration, styles.css is being included by the angular-cli. Your link tag in the HTML isn't doing anything.
(The angular cli is also dynamically injecting a link tag for that style into your html, which is why 'it works').
Remove your styleSheet path from index.html and link it through angular-cli.json like this
styles:
[
"styles.css",
"css/style.css",
"css-link/bootstrap.css"
]
I made a website with a favicon that was working a few days ago. Now, it is only working on my localhost. It's not appearing online. What could be the problem? I uploaded the favicon to public_html.
<link href="view/css/bootstrap.min.css" rel="stylesheet">
<link href="view/css/styles.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet" type="text/css">
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/respond.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
My textbox renders very differently on IE and Chrome
IE
Chrome
You can see that width of textbox is small in IE.
My html is defined as
<input id="Name" data-bind ="value:Name" style="width: 210px"/>
I tried downloading normalize.css and included at top of my scripts , but still it renders incorrectly on different browsers.
I am sure there would be more input required, so do let me know what you guys need to resolve my issue.
These are the scripts i am using
<link href="css/normalize.css" rel="stylesheet" />
<script src="../Myfolder/External/jQuery/jquery-1.7.2.js"></script>
<link href="../Myfolder/External/jQuery UI/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script src="../Myfolder/External/jQuery UI/js/jquery-ui-1.8.20.custom.min.js"></script>
<link href="../Myfolder/Styling/common.css" rel="stylesheet" />
<script src="../Myfolder/External/Knockout/knockout-2.2.0.js"></script>
<script src="../Myfolder/External/JSON/json2.min.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/koExternalTemplateEngine_all.min.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/knockout.validation.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/knockout.mapping-latest.js"></script>
<link href="../Myfolder/External/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="../Myfolder/External/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
<link href="../Myfolder/External/Bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="../Myfolder/External/Bootstrap/css/responsive.css" rel="stylesheet" />
<script src="../Myfolder/External/Bootstrap/js/bootstrap.js"></script>
<script src="../Myfolder/External/Kendo/kendo.web.min.js"></script>
<script src="../NewUI2013/AgrOD/external/amplify/amplify.min.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/knockout-kendo.min.js"></script>
<script src="../Myfolder/External/Knockout/knockout.dirtyFlag.js"></script>
<script src="../Myfolder/Custom/customKO.js"></script>
<script src="../Myfolder/Custom/custom.js"></script>
Set height:25px or any other value should solve the issue. The problem most likely that since you used so many css files of external source, the browser maybe misinterpreting some of them.
I'm using Full Calendar to show some events dates but having problem with widht value. I want it to be able to work properly at minimum 1024x768 resolution and other bigger screen sizes ( such as 1366x768 sized ) I tried quoting every width value in fullcalendar.css, enabling, disabling all css files one by one, inserting inline styles. Somebody advised working with bootstap responsive but it didn't gone well either. Right now i can see my calendar perfect in 1024x768 resolution but in bigger resolutions there is a gap between calendar and right tables. I used chrome's tool inspect element and it says there is nothing on that empty area such as margin or padding.
my header is:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS FILES -->
<!--[if !IE]><!-->
<link rel="stylesheet" href="/assets/default/css/style.css" type="text/css" />
<!--<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/assets/default/css/all-ie-only.css" />
<![endif]-->
<link rel="stylesheet" href="/assets/default/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="/assets/default/css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="/assets/default/scripts/jquery-ui-1.9.2.custom/css/smoothness/jquery-ui-1.9.2.custom.min.css" type="text/css" />
<link rel="stylesheet" href="/assets/default/css/fullcalendar.css" type="text/css" />
<link rel="stylesheet" href="/assets/default/css/fullcalendar.print.css" type="text/css" />
<link href="assets/default/css/bootstrap-responsive.css" rel="stylesheet">
<!-- END CSS FILES -->
<!-- JS FILES -->
<script src="/assets/default/scripts/jquery-1.8.3.min.js" type="text/javascript" ></script>
<script src="/assets/default/scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript" ></script>
<script src="/assets/default/scripts/bootstrap.min.js" type="text/javascript" ></script>
<script src="/assets/default/scripts/fullcalendar.js" type="text/javascript" ></script>
<!-- END JS FILES -->
<title>Permission System</title>
</head>
Here is a copy of my style.css:
and my Full Calendar div:
<div style="min-width: 45%; width: auto; float: left; margin-left: 0px;" id="calendar" ></div>
Please help I'm about to go crazy!
I can send you teamviewer info if you think it would be easier to understand.
All codes about css and some pics
Take fullcalendar.print.css out and make sure you have full calendar css and js only to rule out any print css issues.
The print css should only be incuded for print media and not for screen.
Have a look at FullCalendar Source on this page I cant find any reference to print.css in the header.