<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<div class="sidebar-nav">
<ul>
<li>This is some test text</li>
</ul>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
That is my html
html, body {
width: 100%;
height: 100%;
}
#sidebar-wrapper {
position: absolute;
width: 200px;
height: 100%;
background-color: black;
}
.sidebar-nav ul li a {
display: block;
color: white;
font-family: "Open Sans", serif;
font-size: 20px;
}
That's my css
Applying the Open Sans font family to the a element changes the font but it looks bold, when it should be thinner.
I've tried other fonts as well and they all look bolder.
How it should be:
How it is (Here it looks more bubbly):
Update: https://jsfiddle.net/xzw2ssz5/
Try to paste the following code in your custom CSS file.
body {
font-family: "Open Sans" !important;
}
And make sure that your fonts are properly being loaded by navigating to the Network tab in developer tools and then selecting the checking the fonts.
If you don't want to apply the fonts on the entire document then try putting !important in front of your font-family rule like so:
.sidebar-nav ul li a {
display: block;
color: white;
font-family: "Open Sans", serif !important;
font-size: 20px;
}
Let me know if that works for you.
Update
okay, I've got it up and running. Basically, you haven't selected any font-weight from the google fonts library. Replace your <link> with this one:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
Keep the font-weights values which you want and remove all others. That's why you were not able to change its font-weight. Hope that helps now.
Hi I think the problem is the order you're calling the your css resources
move the Open Sans import on top of your css stylesheet try this or just #import the css font directly into your stylesheet.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="style.css"
type="text/css">
Related
I'm trying to import an markdown file into an HTML.
I've used the iframe tag to do so but it is shortening the content inside a box.
As I'm using markdown to write the text thats going inside the main tag, so my intention is that it keeps the height of the text in markdow.
I also used the lib https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js but it didn't worked.
And a common import, and it didnt work it either.
The codes are the following:
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- CSS styles -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/solid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css"/>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<!-- Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js" integrity="sha512-dnvR4Aebv5bAtJxDunq3eE8puKAJrY9GBJYl9GC6lTOEC76s1dbDfJFcL9GyzpaDW4vlI/UjR8sKbc1j6Ynx6w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/#webcomponents/webcomponentsjs#2/webcomponents-loader.min.js"></script>
<!-- Load the element definition -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#1/src/zero-md.min.js"></script>
<script type="module" src="javascript.js"></script>
<!-- Simply set the `src` attribute to your MD file and win -->
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
<title></title>
</head>
<body>
<header>Header</header>
<aside>
<div id="mySidenav" class="sidenav">
<p>nav bar</p>
</div>
<aside>
<main>
<!-- include my markdown file here -->
<!-- try 1 -->
<link href="mkd.md" rel="import" />
<!-- try 2 -->
<pre class="hljs"><code>
<link class="hljs rel="import" href="mkd.md">
</code></pre>
<!-- try 3-->
<div w3-include-html="mkd.md"></div>
</main>
<footer>Footer</footer>
</body>
</html>
CSS:
header{
background-color: #000000;
padding-left: 4%;
padding-top: 1%;
padding-bottom: 1%;
margin-top: -0.001%;
}
main{
padding-left: 4%;
max-width: 86%; // set maximum width of the container
white-space: wrap; // do not let text wrap
overflow: hidden; // do not let overflow out of container
text-overflow: ellipsis; // shorten all overflowing text
}
body, html,main {
height:100%;
width:100%;
}
iframe {
height:100%;
width:100%;
background:cyan;}
#mySidenav a {
position: fixed;
left: -230px;
transition: 0.3s;
padding: 15px;
width: 270px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
margin:0;
padding-top: 0;
padding-bottom: 0;
}
And I used a markdown available at https://markdown-it.github.io/
All the solutions I've found it I had to install a package, is there a way to do it just importing it ?
Edited:
There is a scroll bar and if I remove it doesn't show the whole content, and the markdown is plain, it not enhanced, as it should be since I'm using <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
Thanks you all guys!
I am new to Web development and trying to create a basic avatar using HTML/CSS.
I created a style.css file, an avatar.css file and an index.html.
Everything works fine until I set the .avatar CSS class. I want to use it to round the corners of my image. But after I set the img class to "avatar", the images stay square while I should have 2 rounded images, one of 50x50ph and the other of 30*30 (one being set to the class avatar and the other on the class avatar-small).
Here is what the page looks like:
Here is my code
CSS style
/* --- Google Fonts--- */
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600&family=Open+Sans:wght#300;400&display=swap" rel="stylesheet")
/* --- Components Design--- */
#import "avatar.css";
/*#import url("components/button.css");*/
/*#import url("components/dropdown.css");*/
/*#import url("components/card.css");*/
/*#import url("components/badge.css");*/
/*#import url("components/banner.css");*/
/*#import url("components/tabs.css");*/
/*#import url("components/list.css");*/
/* --- Fonts--- */
body {
font-family: "Open Sans", "Helvetica", "sans-serif"
}
h1, h2, h3 {
font-family: "Montserrat", "sans-serif"
}
CSS avatar
.avatar {
border-radius: 50%;
height: 50px;
width: 50px;
}
.avatar-small {
border-radius: 30%;
height: 50px;
width: 30px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href='style.css' rel='stylesheet'>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600&family=Open+Sans:wght#300;400&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/73fba8f7d3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Web Components</title>
</head>
<body>
<div class="container">
<h1 class="text-center">UI components sprint</h1>
<h2>Avatar design</h2>
<img src="https://via.placeholder.com/50" alt="" class="avatar">
<img src="https://via.placeholder.com/50" alt="" class="avatar-small">
</div>
<!-- jQuery & Bootstrap JS for dynamic Bootstrap components -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I really can't understand what's wrong here. I tried finding the answer on my own but didn't manage to...
Thank you for your help.
If you have linked the url of your image, and put border-radius: 50% properly, you should get the result.
What I find is that you've linked style.css 2 times, and missed out avatar.css external link file. If its typo, then fix it. Otherwise, you should get the result.
img {margin: 20px;}
#img1 {border-radius: 10px;}
#img2 {border-radius: 30px;}
#img3 {border-radius: 50%;}
<img id="img1" src="https://picsum.photos/200/300" />
<img id="img2" src="https://picsum.photos/200/300" />
<img id="img3" src="https://picsum.photos/200/300" />
First, check your developer tools to see if the file is loaded. if both files are in the same hierarchy level, it should be fine as your code seems to work.
Your CSS code misses some ";" at every rule, which might be the reason they're not applied. the fix should look like this:
.avatar {
border-radius: 50%;
height: 50px;
width: 50px;
}
.avatar-small {
border-radius: 30%;
height: 50px;
width: 30px;
}
I hope it works, and happy coding :)
How are you doing?
First, thank you for trying to help, I know this question is silly but I couldn't find an answer nor understand why it is not working as expected.
I have the following tree on my machine:
projectFolder
|__ website
|__index.html
For this website, I'm using Bootstrap 4, but I needed to use glyphicons from Bootstrap 3, so I saved the glyphicons part from Bootstrap 3 in a .css file called glyphicons.css. I then uploaded this file to GitHub, which raw version is available here.
When I tried using it in index.html, using the following line to import it, it didn't work.
<link rel="stylesheet" href="https://raw.githubusercontent.com/feRpicoral/GlyphiconsBootstrap4/master/glyphicons.css" type="text/css">
Nevertheless, when I download the file and added it to projectFolder, resulting in the following path, it worked fine, so the problem is not in the .css file.
projectFolder/glyphicons.css
To import the file I was using the same <link> as above but with "../glyphicons.css" as href.
Long story short, when importing a stylesheet hosted on GitHub using the raw link of the file, it does not work.
Am I doing something wrong?
Below you can see the relevant part of the glyphicon.css file and the code that I'm using in index.html. Feel free to run the snippet and understand better what I mean.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-picture:before {
content: "\e060";
}
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Glyphicons File -->
<!--<link rel="stylesheet" href="../glyphicons.css" type="text/css"> WORKS (COMMENTED TO USE WITH STACKOVERFLOW SNIPPET)-->
<!-- <link rel="stylesheet" href="https://raw.githubusercontent.com/feRpicoral/GlyphiconsBootstrap4/master/glyphicons.css" type="text/css"> DOESN'T WORK-->
<title>Glyphicons Test</title>
</head>
<body>
<style type="text/css">
div {
font-size: 100px;
margin: 100px auto;
}
#text {
font-size: 20px;
display: block;
}
</style>
<div class="container bg-dark text-center text-white">
<span class="glyphicon glyphicon-picture"></span>
<span id="text">Icon is above if working</span>
</div>
</body>
</html>
Thanks in advance,
Fernando
Taking help from this post - and gitcdn you can create a link which you can refer to in your HTML... i removed the css code where you had loaded the glyphicons and now all glyphicons are loaded from your git link;
div {
font-size: 100px;
margin: 100px auto;
}
#text {
font-size: 20px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://gitcdn.link/repo/feRpicoral/GlyphiconsBootstrap4/master/glyphicons.css" />
<title>Glyphicons Test</title>
</head>
<body>
<div class="container bg-dark text-center text-white">
<span class="glyphicon glyphicon-picture"></span>
<span id="text">Icon is above if working</span>
</div>
</body>
</html>
I am trying to add a custom font in CSS but it does not work.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shout!</title>
<meta name="author" content="Jordan Baron">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div>
<img src=images/logo.png alt="logo" height="54" wdth="133" class="logo">
<hr class="divider">
<h1 id="wis">Shout!</h1>
</div>
<script src="scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</body>
</html>
My CSS:
#font-face {
font-family: SanFran;
src: url(SF-UI-Display-Thin.otf);
}
div {
text-align: center;
}
.divider {
margin: 0;
padding: 5px;
}
.logo {
margin: 0;
padding: 5px;
}
.wis {
font-family: SanFran;
}
I am using Bootstrap 3 on Mac OS X. I am using Chrome.
The font changes when I don't use Bootstrap but when I do use Bootstrap the font doesn't change
It won't change because you're using an ID on your <h1> but you're trying to target a class of .wis instead of an ID of #wis.
Try changing
.wis {
font-family: SanFran;
}
to
#wis {
font-family: SanFran;
}
I am currently working on developing an HTML and I am using Bootstrap to make it more mobile-friendly. However, the bootstrap font sucks and I am looking to override it and replace it with a better looking font. I am posting the head of my HTML file. It looks like this:
<head>
<title> Connotate Engineering </title>
<meta name=viewport content='width=700'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
And this is what my CSS looks like:
body{
font-family: 'Arial';
font-size: 12px;
}
#images{
font-family: 'Arial';
text-align:left;
font-style: regular;
letter-spacing: 0;
line-height: 1.5em;
text-decoration: none;
word-spacing: 0;
}
#images a{
margin:0px 20px;
display:inline-block;
height: 100%;
text-decoration:none;
color:black;
font-family: 'Arial', serif;
}
.caption {
width: 200px;
text-align: center;
}
#media screen and (max-width:480px) {
#sidebar { display: none;}
}
Change the link positions in your <head> from this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
To this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
The order matters, you want your final changes to be below all others.
And as Arham pointed out, if you put in an inline style, it will have a higher priority than the bootstrap.
If you want the whole page to have that font then you should either remove all font rules in all elements then add body { font-family: 'Indie Flower', cursive; } or include all elements you want to have that font like:
body, #images, #images a {
font-family: 'Indie Flower', cursive;
}
One way is to add the style attributes within the desired tag itself.
ie: (you want to override a certain style on a div)
<div style = "font-family: Arial">