<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
<head>
<title>Home</title>
<style>
#font-face {
font-family: "Material Design Icons";
src: url("fonts/materialdesignicons-webfont.eot?v=1.4.57");
src: url("fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"), url("fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2"), url("fonts/materialdesignicons-webfont.woff?v=1.4.57") format("woff"), url("fonts/materialdesignicons-webfont.ttf?v=1.4.57") format("truetype"), url("fonts/materialdesignicons-webfont.svg?v=1.4.57#materialdesigniconsregular") format("svg");
font-weight: normal;
font-style: normal;
}
.box-modern-media {
position: relative;
padding: 20px 0;
font-size: 60px;
line-height: 1;
min-height: 1.3em;
width: 1.9em;
margin-left: auto;
margin-right: auto;
}
.mdi {
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.box-modern-media {
width: 1.7em;
}
.box-modern-icon {
opacity: 1;
}
.mdi {
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.mdi-airplane:before {
content: "\f11c";
}
.mdi-airplane-off:before {
content: "\f11d";
}
#media (min-width: 1200px) {
.box-modern-media {
font-size: 85px;
}
.box-modern-media {
font-size: 64px;
}
}
.box-modern-icon {
position: relative;
z-index: 2;
right: -5%;
font-size: inherit;
color: #09b294;
}
</style>
</head>
<body>
<div class="box-modern-media">
<div class="box-modern-icon mdi mdi-airplane"></div>
</div>
</body>
</html>
This code works perfectly when i run it in WAMP
Output in WAMP
But when i run it on Microsoft visual studio 2013 it gives only a box
Output in Visual studio
I am a beginner and i have no idea what the problem is.I have the file materialdesignicons-webfont.woff2
in fonts file.Is it because of visual studio version?. Please help me.Thank you.
Related
I have inserted the fonts but I can't see them. I don't know why there is no space in between the words.
<html>
<head>
<link href="app.css" rel="stylesheet" />
</head>
<body>
<header>
<div class="container">
<div id="topbar">
</div>
<nav id="main">
<img src="logo.svg" alt="logo">
<ul id="main-menu">
<li>Η ΟΜΟΣΠΟΝΔΙΑ</a></li>
<li>ΑΡΚΑΔΩΝ ΕΡΓΑ</a></li>
<li>ΕΠΩΝΥΜΟΙ ΑΡΚΑΔΕΣ</a></li>
<li>ΝΕΑ - ΕΝΗΜΕΡΩΣΗ</a></li>
<li>ΕΠΙΣΚΕΨΗ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
<li>ΑΝΑΖΗΤΗΣΕΙΣ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
#font-face {
font-family:Proxima Nova ;
src: url(./fonts/Proxima\ Nova\ Regular.otf);
font-weight: normal;
}
#font-face {
font-family:Proxima Nova ;
src: url(./fonts/Proxima\ Nova\ Bold.otf);
font-weight: bold;
}
#font-face {
font-family: SourceSansPro ;
src: url(./fonts/SourceSansPro-Regular.ttf);
font-weight: normal;
}
#font-face {
font-family: SourceSansPro ;
src: url(./fonts/SourceSansPro-Bold.ttf);
font-weight: bold;
}
body {
margin: 0;
font-family: 'SourceSansPro-Regular', serif;
}
header {
background: url('./images/bg.png') bottom center no-repeat;
background-size: cover;
height: 750px;
}
#topbar {
height: 70px;
text-align: center;
}
nav#main {
background-color:white;
border-radius: 4px;
height: 60px;
position: relative;
}
#logo{
position: absolute;
display: block;
border: 10px solid #AB0427;
border-radius: 100%;
left: 50px;
top: 50%;
transform: translateY(-50%);
}
#logo img{
display: block;
}
.container{
width: 1360;
margin: 0 auto;
}
#main-menu{
margin: 0;
padding: 0 20px 0 320px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
list-style: none;
}
#main-menu a {
color:#002868 ;
font size: 14px;
font-weight: bold;
}
Try Using Formats and make sure the path is correct
Note: Remove the spaces if there are no spaces is in the filename, change the backward slash into forwarding slash
#font-face {
font-family:"Proxima Nova" ;
src: url(./fonts/Proxima/Nova/Regular.otf) format("opentype");
font-weight: normal;
}
#font-face {
font-family:"Proxima Nova";
src: url(./fonts/Proxima/Nova/Bold.otf) format("opentype");
font-weight: bold;
}
#font-face {
font-family: "SourceSansPro";
src: url(./fonts/SourceSansPro-Regular.ttf) format("truetype");
font-weight: normal;
}
#font-face {
font-family: "SourceSansPro";
src: url(./fonts/SourceSansPro-Bold.ttf) format("truetype");
font-weight: bold;
}
Looks like you have backslashes in the urls of the top two. I'd check to make sure the filepath is correct, that may be part of the problem.
Additionally, you could try to add a format property like so:
#font-face {
font-family: Proxima Nova ;
src: url(./fonts/Proxima/Nova/Regular.otf) format("open-type");
font-weight: normal;
.home {
background: url(download.png);
background-size: 1500px;
overflow: ;
background-position: -130px -20px;
}
.content h2 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 45px;
font-weight: 900;
line-height: 50px;
position: relative;
bottom: 50px;
z-index: 200;
}
.content h2::before {
content: "";
background: linear-gradient(130deg, #1951bf 0%, #25b7c7 89%);
position: absolute;
height: 14px;
width: 334px;
filter: opacity(0.4);
top: 77px;
z-index: -200;
}
.content p {
width: ;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 15px;
color: #3a505f;
letter-spacing: 1.1px;
line-height: 26px;
z-index: 200;
transform: scale(1.04, 1.1);
}
.home {
display: flex;
justify-content: ;
align-items: center;
height: 100vh;
color: black;
z-index: -100;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?
family=Source+Sans+Pro:wght#700&display=swap" rel="stylesheet">
<div class="home">
<div class="content">
<h2>No-Code<br>Payment Platform</h2>
<p>PayRequest makes it easy to create your own branded payment page, and to send payment links to all your customers.</p>
</div>
</div>
Above is the code for the site I am building.
The UI of the page I want to rectify: click-here-to-view
The original UI: click-here-to-view
I have the exact same font-family down and I have tried different sizes and weights but I am not able to get the exact same text as the original site in the p section. I have got the same one down in h2 but not in p.
Can somebody help to resolve this issue, please?
In h2 you have font-family: 'Source Sans Pro' but in p you have 'Poppins'. So this is why they are two different fonts. You can either declare a universal font family using *{} or you can just switch the font family in p to 'Source Sans Pro'
Keep the same font-family for the elements in your css. h2 and p and different font-family. Also if you put everything in the a < body> tag you can just define the font-family in their rather than adding it in every element like so:
body {
font-family: 'Source Sans Pro', sans-serif;
}
I have this complete code but is not working for me.
<style>
.mdi-airplay::before {
content: "\F01F";
}
.mdi:before {
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<i class="mdi mdi-airplay"></i>
Please, is there anything am getting wrong?
I have a dashboard with different sized widgets. I need to make a single class that adds a border around the widget, and also adds a font awesome icon to the top right of the widget on top of the existing content.
How i do this with one css class?
I am not 100% understand your need but i was try to make something make close of your need.
HTML:
<span class="icon fa-id-card-o"></span>
CSS:
.icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
right: 0;
color: red;
}
.icon:before {
content: "\f2c3";
}
.icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
right: 0;
color: red;
}
.icon:before {
content: "\f2c3";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="icon fa-id-card-o"></span>
ANOTHER EXAMPLE with a fixed div like a widget's
LIve view
HTML:
<div class="box">
<span class="icon fa-id-card-o"></span>
</div>
CSS:
.icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: red;
float: right;
}
.icon:before {
content: "\f2c3";
}
.element.style {
}
.box {
background: green;
margin: 100px;
display: block;
width: 70%;
height: 300px;
}
.icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: red;
float: right;
}
.icon:before {
content: "\f2c3";
}
.element.style {
}
.box {
background: green;
margin: 100px;
display: block;
width: 70%;
height: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="box">
<span class="icon fa-id-card-o"></span>
</div>
Well, i'am understand something like this...
HTML
<div class="box">
<div class="box-icon"></div>
</div>
CSS
.box {
box-shadow: 0px 0px 10px #000;
height: 5em;
width: 5em;
}
.box-icon {
position: relative;
}
.box-icon:before {
content: "\f2da";
display: inline-block;
font-family: FontAwesome;
position: absolute;
right: -1.5em;
}
I hope can i a help you.
When using font awesome icons directly inside a button or wherever you want you can use like below
<i class="fab fa-rebel"></i>
an example for a button is below
<button class="button">
<i class="fab fa-rebel"></i>
</button>
but, when use an additional css with this, you can use span.
the example below have an additional css 'your-css'.
<button class="button">
<span class="your-css fab fa-rebel"></span>
</button>
I am having difficulty with IE 9 and Opera Browsers only for the alignment of a star.
I am using the following HTML:
<div class="fullwidth">
<div class="floatleft star">★</div>
<h3 class="icontxt">Co-Hosts</h3>
</div>
The Following CSS:
.floatleft
{
float: left;
}
.fullwidth
{
width: 100%;
}
h3
{
margin: 0;
text-align: left;
font-family: "GearedSlab-Regular", "Geared Slab Regular", "geared_slabregular";
text-transform: uppercase;
color: #212D3B;
letter-spacing: .1em;
font-size: 1.5em;
line-height: 1.7em;
}
h3.icontxt
{
padding-left: 1.5em;
}
.star
{
font-size: 1.4em !important;
color: #A92A23;
}
Ok, so Chrome, Firefox, and Safari render it like so (the way I need it in all browsers to be):
However, if you look at this in IE 9, and/or Opera, it looks like this:
The Star is too high, it needs to be in line with the text: "CO-HOSTS"
Am I doing something wrong here? How can this be done for IE, Chrome, Opera, Safari, and Firefox universally? This is just so frustrating!
How about this:
.floatleft
{
float: left;
}
.fullwidth
{
width: 100%;
}
h3
{
margin: 0;
text-align: left;
font-family: "GearedSlab-Regular", "Geared Slab Regular", "geared_slabregular";
text-transform: uppercase;
color: #212D3B;
letter-spacing: .1em;
font-size: 1.5em;
line-height: 1.7em;
}
h3.icontxt
{
padding-left: 1.5em;
}
.star
{
line-height: 1.7em;
font-size: 1.4em !important;
color: #A92A23;
}