We have a problem on our page. We use a plugin for choosing a startdate, but this plugin does not display the calandar icon for choose the date. All is working except the calandar icon to show to the customer that he can click. Now we try to insert a icon in the second row of the flex box.
.wscsd_calendar_dates_field::after {
content: "\f073";
}
But with this, it adds a new row to the flexbox and displays the icon. But we want to have it in the second one becasue the user can click there to open the date chooser.
This is the HTML structure we have...
<div class="wscsd_date_picker">
<label for="wscsd_date_picker_display">Abo Start:</label>
<div class="wscsd_date_picker">
<input type="date" class="short wscsd_calendar_dates_field" style="" id="wscsd_start_date" name="wscsd_start_date" min="2022-02-06" value="2022-02-06" placeholder="2022-02-06">
</div>
</div>
How can we do this?
.wscsd_calendar_dates_field::after {
content: "\f073";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="wscsd_date_picker">
<label for="wscsd_date_picker_display">Abo Start:</label>
<div class="wscsd_date_picker">
<input
type="date"
class="short wscsd_calendar_dates_field"
style=""
id="wscsd_start_date"
name="wscsd_start_date"
min="2022-02-06"
value="2022-02-06"
placeholder="2022-02-06"
/>
</div>
</div>
</body>
</html>
Related
I want to change the font size and color of the a when I hover over p. It is not working. Probably there is a simple solution, but I am struggling with this for a few hours.
If anyone has not too complicated links related to this topic I also would be happy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p:hover div nav a {
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
One
Two
Three
</nav>
</div>
</body>
</html>
Hi there i get the simple solution for you .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p:hover + .hv {
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<div class="hv">
One
Two
Three
</div>
</nav>
</div>
</body>
</html>
Hi there ok so if i might get you . you want to get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.hv a:hover{
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<div class="hv">
One
Two
Three
</div>
</nav>
</div>
</body>
</html>
Try something like:
p:hover, a:hover {color: blue;font-size: 22px;}
Your CSS selector p:hover div nav a is incorrect. This would refer to an <a/> within a <nav/> within a <div/> within a <p/> that is being hovered. You can fix this with the change I made below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
nav p { /*selects all hovered <p/> within a <nav/>*/
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
One
Two
Three
</nav>
</div>
</body>
</html>
I'm using font awesome CDN to use the icons but not all icon do show, i put 2 examples of 2 icons, the first one shows and the second does not, it rather shows as an X inside a square, what is going on ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alarabiyah | Breaking News From Around The World</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-
xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="header">
<div class="header__top">
<div class="header__top-logo-container">
<img src="logo.png" alt="logo" class="header__top-logo-image" />
</div>
<div class="header__top-controls">
<i class="fa-solid fa-magnifying-glass"></i> // SHOW
<i class="fa-regular fa-magnifying-glass"></i> // SHOWS AS AN X INSIDE A SQUARE
<div class="header__top-theme"></div>
</div>
</div>
</header>
</body>
</html>
i have tried using different CDNs, i've also used the Font Awesome Kit, but it doesn't change anything
It is because "fa-regular fa-magnifying-glass" is not free. You can check this out using below link:
Font awesome free icons
Is there a way to fill an input field with a variable. I think something like this:
<input id="email2" name="email2" value>
If you want it to present with actual value, use value attribute and set it to what you want. If you just want placeholder text or number that shows up but doesnt actually have any value, use the placeholder attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>document</title>
</head>
<body>
<input id="email2" value="2345">
<!-- OR -->
<input id="email3" placeholder="123">
</body>
</html>
I loaded a font and i get mime type error when i save the file :
And i dont understand what exactly going on.
this is the html code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" src="Branda-yolq.ttf">
<title>Document</title>
</head>
<body>
<h1 id="welcomingText">Welcome to QUIZ</h1>
<button id="init-button">Start Quiz!</button>
<div class="contentDivDisplayed">
<p id='question'>question</p>
<span><input type="radio" autocomplete="off" name="hh"><p></p></span>
<span><input type="radio" autocomplete="off" name="hh"><p></p></span>
<span><input type="radio" autocomplete="off" name="hh"><p></p></span>
<span><input type="radio" autocomplete="off" name="hh"><p></p></span>
<p id="quest-num">questionNum</p>
<button id="next-button">Next</button>
</div>
<div id="alert-box"></div>
<script src="quiz.js"></script>
</body>
</html>
and this is the css code:
#font-face {
font-family: "skot";
src: url("Branda-yolq.ttf");
}
This line is causing the problem:
<link rel="stylesheet" src="Branda-yolq.ttf">
You are telling the browser to load a stylesheet, but instead you give it a font-file. That's how you got the MIME Type error. Remove the line and the error should go. You are already loading the font in the css.
I have a test site that I'm making it doesn't use the imported font or the backup font. The strange thing is that while it doesn't change the font locally, putting the code into codepen works just fine.
In case you're wondering, I have all of my files in the right places (see image)
Also, here's the codepen link for my source code and it's also here below:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="description" content="Test Page" />
<meta name="author" content="test Page" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" ref="stylesheet">
</head>
<body>
<section id="hero">
<div class="hero container"></div>
<div>
<h1>Test Header</h1>
Test Button
</section>
<script src="main.js"></script>
</body>
<html>
Its rel not ref for linking stylesheet
<link href="style.css" rel="stylesheet">