I'm failing to show Font Awesome icons on my app (only this page)! The icons are showing on the other pages but not on this one I don't know why! and yes I'm importing it in my index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
A link to codesandbox for better viewing
Here the code:
export default function Post({ post }) {
return (
<div className="coupon-container">
<div className="coupon">
<div className="content">
<h2>TITLE GOES HERE</h2>
<h1>
TEXT <span>TEXT</span>
</h1>
</div>
<div className="couponValidity">
<i className="fa fa-solid fa-timer"></i>
<p>SOME TEXT GOES HERE</p>
</div>
</div>
</div>
);
}
The icon you're using doesn't exist on the style you've imported. as I see the timer icon is a pro icon. but if you choose another icon, like:
<i className="fa fa-user"></i>
then the icon is rendered.
this works on me
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
</head>
<body>
<i class="fa fa-user"></i>
<p>SOME TEXT GOES HERE</p>
</body>
</html>
Related
The problem I'm having only occurs in Mobile. Note that I'm using simple dropdown as well.
I look all the threads related to that, but cannot figure out why the menu does not work.
See the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Semantic-UI Issue</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css" />
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
Home
<div class="ui simple dropdown item">
Menu <i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="https://reactgirl.github.io/portifolio/about.html">About me</a>
<div class="divider"></div>
<a class="item" href="https://github.com/ReactGirl/portifolio/blob/master/about.html">This Code</a>
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues/6465">Semantic UI issue</a>
</div>
</div>
</div>
</div>
<div style='padding: 100px 0 0 30px'>
<div>Example page to show a semantic UI issue with the dropdown on mobiles: The dropdown does not open!</div>
<div class="ui padded segment">From the docs: "A simple dropdown can open without Javascript."</div>
<div><strong>The menu dropdown issue was reproduced on the following Mobiles:</strong></div>
<li>iPhone X. Browsers: Safari, Chrome.</li>
<li>iPhone 6. Browsers: Safari, Chrome.</li>
<div class="ui divider"></div>
References:
<div>
Semantic UI GitHub issue
</div>
</div>
</body>
</html>
You need to initialize the dropdown.
$('.ui.dropdown').dropdown();
This is actually a confirmed issue in Semantic-UI.
https://github.com/Semantic-Org/Semantic-UI/issues/6465
My solution was setting Z-index higher on the icon (.dropdown.icon).
The icon was unclickable due to being behind the text input.
I am learning on how to make a canvas menu with Foundation & I made this example but it does not work at all!
Here's the code:
<!DOCTYPE html>
<!--[if IE 9]>
<html class="lt-ie10" lang="en">
<![endif]-->
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>thenewboston</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="main.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- Toggle button -->
<a class="left-off-canvas-toggle" href="#">Toggle Menu</a>
<!-- Offcanvas menu -->
<aside class="left-off-canvas-menu">
<ul class="no-bullet">
<li>Home</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</aside>
<!-- Main content -->
<div class="row">
<div class="medium-6 columns bg-2">Hey now dude</div>
<div class="medium-6 columns bg-3">This is some sample content</div>
</div>
<!-- Exit overlay -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Everything looks perfect and my css & js folders are correctly placed at the same directory. I also test if foundation works or not with another simple example and it worked fine. I really don't know why it's not working. Please if you know how to solve it ,please let me know.. Thanks!
Why am I not getting the value for dish.price, dish,description etc, what I am doing wrong here?
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion: Menu</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row row-content"
ng-init="
dish= {
name:'Uthapizza',
image: 'D:\Ericoll\bootstrap-3.3.6-dist\bootstrap-3.3.6-dist\Image\uthapizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments:''
}">
<div class="col-xs-12">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src={{dish.image}} alt="Bread">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger label-xs">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!--<script src"./bootstrap-3.3.6-dist/js/bootstrap-3.3.6-dis/angular2.min.js"></script>-->
<!--<script src="D:\Ericoll\bootstrap-3.3.6-dist\bootstrap-3.3.6-dist\jsangular2.min.js"></script>-->
</body>
</html>
Made a few changes and used a controller now everything works great :)
The problem is, I think atleast not sure, but you used \ in your image path that's why I did this \/ then it's not a problem.
DEMO
var app = angular.module('App', []);
app.controller('MainCtrl', function($scope) {
$scope.dish = {
name: 'Uthapizza',
image: 'D:\/Ericoll\/bootstrap-3.3.6-dist\/bootstrap-3.3.6-dist\/Image\/uthapizza.png',
category: 'mains',
label: 'Hot',
price: '4.99',
description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: ''
};
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<title>Ristorante Con Fusion: Menu</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row row-content">
<div class="col-xs-12">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src={{dish.image}} alt="Bread">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger label-xs">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The value of the dish.image is the problem - avoid using backslash or escape it
I executed your code. Problem is with image part, if you remove image from ng-init your code will work fine. For image path avoid backlash.
I am trying to load search glyphicon with the following:
<div tabindex="6" class="glyphicon glyphicon-search">...<.div>
But, glyphicon loading as the following:
What is the solution?
background-color:none transparent}#font-face{font-family:'Glyphicons Halflings';src:url(/css/fonts/glyphicons-halflings-regular.eot);src:url(/css/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(/css/fonts/glyphicons-halflings-regular.woff) format('woff'),url(/css/fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(/css/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular)
Check this code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<div tabindex="6">
<span class="glyphicon glyphicon-search"></span>
<div>
</body>
</html>
Here is Bootstrap3.2.0 downloaded from Bootstrap site
Unpack and run below code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="bootstrap3.2.0/css/bootstrap.min.css">
</head>
<body>
<div tabindex="6">
<span class="glyphicon glyphicon-search"></span>
<div>
</body>
</html>
Worked as like as BS3.5
Though a late answer, for someone who has this issue:
Using Bootstrap's CDN in the tag solved this issue for me.
I have a header in which I have one < image and back text is present .I need to give space or margin between these field example :5px .can we give margin in between field .
here is my code
http://codepen.io/anon/pen/xGgXVE
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
</body>
<ion-view>
<ion-header-bar align-title="center" class="bar-balanced">
<div class="buttons">
<a class="button icon-left ion-chevron-left button-clear">Back</a>
<!--i style="font-size:30px;" class='icon ion-chevron-left'></i-->
</div>
<h1 class="title">Title</h1>
</ion-header-bar>
</ion-view>
</html>
Use this CSS:
.button:before{
margin: 0 5px;
}
The :before element is the < icon.