I'm trying to use Ionicons in buttons of Materialize but it isn't showing up instead I'm getting an odd box.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Materialize</title>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/ionicons.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-
2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<a class="btn btn-floating btn-large cyan pulse"><i class="ion-social-
facebook"></i></a>
<a class="btn btn-floating btn-large cyan pulse"><i class="ion-social-
twitter"></i></a>
</body>
<html>
This is what I'm getting -
Please tell me that you're not actually splitting the rows in the mid of a class name... and that you hope everything works...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Materialize</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<a class="btn btn-floating btn-large cyan pulse"><i class="ion-social-facebook"></i></a>
<a class="btn btn-floating btn-large cyan pulse"><i class="ion-social-twitter"></i></a>
</body>
result:
Related
I have 5 buttons. With Fetch, the api is fetched and written to the screen. I want the top 50 countries to be listed when I click on button 1. After that, when you press button number 2, the countries between 50-100 should appear on the screen. In this order, I want to remove 250 countries 50-50 when each button is clicked
const row = document.querySelector('.row');
const buttons = document.querySelectorAll('button')
fetch('https://restcountries.com/v3.1/all')
.then(res=>res.json())
.then(data=>{
let card = "";
data.map(item=>{
card+=`
<div class="col-md-4">
<div class="card" >
<img height="300" src="${item.flags.png}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.name.common}</h5>
<p class="card-text">${item.capital}</p>
Go somewhere
</div>
</div>
</div>
`
})
row.innerHTML = card;
});
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<section>
<div class="container mt-5">
<div class="row g-5"></div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
This is my main container component,
<template>
<div class="main-content">
<slot />
</div>
</template>
This is my topbar component,
<template>
<!-- top bar with back component -->
<div class="top-bar">
<div class="back"><i class="far fa-arrow-left"></i></div>
<div class="page-name">
<div class="main-topic">Management</div>
<div class="dot"></div>
<div class="sub-topic">Products</div>
</div>
</div>
<!--End top bar with back component -->
</template>
This is my product component (With main container & top bar)
<template>
<Main>
<Topbar />
</Main>
</template>
<script setup>
import Main from "../components/Main.vue";
import Topbar from "../components/Topbar.vue";
</script>
Here my CSS not working I have imported all my CSS files into the main HTML file.
<!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>Vite App</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/negus.css">
<link rel="stylesheet" href="assets/css/all.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="app"></div>
<script src="assets/scripts/jQuery.min.js"></script>
<script src="assets/scripts/jQuery-resize.js"></script>
<script src="assets/scripts/script.js"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
It should look like this,
But it look like this,
I don't know why my CSS is not working. Appreciate it if somebody can help. Thanks
Try importing those CSS files in your App.vue like this-
<style>
#import "./assets/css/reset.css";
#import "./assets/css/negus.css";
#import "./assets/css/all.css";
#import "./assets/css/style.css";
</style>
I try to build my project locally and ran it using serve and succeeded, but when I deploy it to cloudflare pages the pages is blank, here the html source from cloudflare build
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
</script>
<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="icon" href="favicon.ico">
<title>xxxxx</title>
<link id="theme-link" rel="stylesheet" href="themes/lara-light-indigo/theme.css">
</head>
<body>
<div id="app">
<div class="preloader">
<div class="preloader-content">
</div>
</div>
</div>
</body>
</html>
and here's the one from local build
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-93461466-1"></script>
<script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());</script>
<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="icon" href="favicon.ico">
<title>xxx</title>
<link id="theme-link" rel="stylesheet" href="themes/lara-light-indigo/theme.css">
<link href="/css/chunk-079f4803.395e4d4d.css" rel="prefetch">
<link href="/css/app.4c84c43c.css" rel="preload" as="style">
<link href="/css/chunk-vendors.3827bea3.css" rel="preload" as="style"><link href="/js/app.4d1812d8.js" rel="preload" as="script">
<link href="/js/chunk-vendors.bc9985c6.js" rel="preload" as="script"><link href="/css/chunk-vendors.3827bea3.css" rel="stylesheet">
<link href="/css/app.4c84c43c.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="preloader">
<div class="preloader-content">
</div>
</div>
</div>
<script src="/js/chunk-vendors.bc9985c6.js">
</script><script src="/js/app.4d1812d8.js"></script></body></html>
why there's no script tag there? the last one: <script src="/js/chunk-vendors.bc9985c6.js"> and <script src="/js/app.4d1812d8.js">
Hey guys im using bootstrap and i wanted to have text in one div but where i write more than the width of the div the text goes out instead of appear or the next line ... here is my html:
<!Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>AGORA</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="SITE.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row entete">
</div>
<div class="row">
<!-- PROFIL -->
<div class="col-md-5">
<!-- PHOTO ET PRES -->
<div class="row">
<!-- PHOTO -->
<div class="col-md-3" style="padding:0;"><img src="profil.jpg" class="img-responsive"></div>
<!-- PRESENTATION -->
<div class="col-md-9">
<p>PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</p>
</div>
</div>
<!-- INFOS DU MEC -->
<div class="row bordure"></div>
<!-- NIVEAU TROPHEES ET CENTRE INTERET -->
<div class="row bordure"></div>
</div>
<!-- DEBATS -->
<div class="col-md-7">
<div class="row bordure"></div>
<div class="row bordure"></div>
</div>
</div>
</div>
</body>
</html>
and my css :
*{
padding:0;
}
.container-fluid{
border: 1px solid; box-sizing: border-box; height:100%;
}
.entete{
height:100px;
background-color: blue;
}
I do not understand while the text in the div doesnt stay in it ...
Thanks for help !
here is the code for it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header style="background-color: blue">
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<div class="container-fluid img-responsive">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-xs-4 col-sm-4 col-lg-4 col-xl-4" ><img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" width="200px" height="200px"></div>
<div class="col-xs-8 col-sm-8 col-lg-8 col-xl-8" style="word-wrap: break-word ">PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</div>
</div>
<script src="" async defer></script>
</body>
</html>
check the fiddle now:https://jsfiddle.net/77qmh8zm/
i've already seen some user with the same problem:
Lightgallery not working
but i still can't get it to work, here's my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</li>
<li <a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</ul>
</div>
</div>
</body>
</html>
Can't figure out what i'm missing.
Thanks for any help
You haven't connect main file - lightgallery.js.
Connect it.
Can you please check this code and see if it does any help? Hope it does :)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
<li ><a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
</ul>
</div>
</body>
</html>