I am new to the use of Font Awesome (using v5 at the moment), and I have come across something strange on my page.
I have the reference to Font Awesome in my tags:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
I have also successfully used icons on my pages of my site, however, in one case, I only get three empty square where the icons should appear.
The code for the offending items is as follows:
<div class="social">
<i class="fas fa-facebook fa-4x"></i><a href="http://twitter.com/RadioVlNationaa"
target="_blank"><i class="fas fa-twitter fa-4x"></i></a><a href="http://youtube.com/user/RadioVlaanderenNatio"
target="_blank"><i class="fas fa-youtube fa-4x"></i></a>
</div>
The strange thing is, I put, as a means of test, an icon elsewhere in the same page (just with the tags) and it worked with no issue at all.
I assume it has something to do with the hyperlink, but what?
As I said, anywhere else on my site, the icons work good as gold.
Could someone help me out, please?
Thank you in advance.
You had mistake "fas" it should "fab":
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<div class="social">
<i class="fab fa-facebook fa-4x"></i><a href="http://twitter.com/RadioVlNationaa"
target="_blank"><i class="fab fa-twitter fa-4x"></i></a><a href="http://youtube.com/user/RadioVlaanderenNatio"
target="_blank"><i class="fab fa-youtube fa-4x"></i></a>
</div>
Related
I am testing Material Components Web from their recommended CDN & some minimal simple custom Vanilla Javascript to get it work properly.
For example, I can follow the single line list example showed here like this:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<ul class="mdc-list">
<li class="mdc-list-item" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
</ul>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
mdc.list.MDCList.attachTo(document.querySelector('.mdc-list'));
</script>
</body>
</html>
Everything works fine except for the Css styling. No height: 48px is set to any of the list items, so all of them appear horribly collapsed, with no paddings at all.
Using the the Chrome Developer Inspector in the online example on their website, I see that height should be 48px height for every single list item.
Why are there missing styles in the official CDN Css?
NOTE: Things I am NOT asking for
I am not using any Js framework: Vue, Angular, React, Web dev server... just plain vanilla Js.
I am not asking how to add custom Css to add that specific missing value (I know how to do it, I just want to avoid doing it, since it should come already with the library). I just showed a single simple example of some missing attribute. I wonder if I am missing some other import or something.
I am already using the deprecated version of lists in production, that work fine, but I am trying here to update to the new recommended way of defining lists.
First of all, I'd recommend using docs on github repo - https://github.com/material-components/material-components-web/tree/master/packages/mdc-list:
List is currently being updated to better match the Material spec. As a result, there are two versions of List available: the deprecated old version and the new, future-proof version.
... there are differences in class names and DOM structure: the old version uses class names with a mdc-deprecated-list prefix (e.g., mdc-deprecated-list-item) whereas the new version uses the typical mdc-list prefix (e.g., mdc-list-item).
The example you referenced is related to deprecated version. You either need to add deprecated to class names, or update it according to the new docs.
Here is updated code which uses the new List version:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<ul class="mdc-list">
<li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">Single-line item</span>
</li>
<li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">Single-line item</span>
</li>
<li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">Single-line item</span>
</li>
</ul>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
mdc.list.MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));
</script>
</body>
</html>
I am using material design through CDN to create a filled input field, but I can't create an error message below when the user doesn't write correctly for example the email, I have tried several ways importing jquery also through CDN but it does not work properly. I have tried to see the API of material design and tried to implement it but It did not work either.
Anyhelp would be really appreciated!
Thanks
<html>
<head>
<title>Parcel Sandbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link
href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form>
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<input
class="mdc-text-field__input mdc-text-field-helper-text--validation-msg"
type="email"
aria-controls="validation-msg"
required
/>
<span class="mdc-floating-label" id="my-label-id">My Label</span>
<span class="mdc-line-ripple"></span>
</label>
<p
class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
role="alert"
>
Enter Valid Email
</p>
</form>
<script>
mdc.textField.MDCTextField.attachTo(
document.querySelector(".mdc-text-field")
);
</script>
</body>
</html>```
https://codesandbox.io/s/admiring-elion-kojst?file=/index.html
First off, jQuery wasn't needed. It didn't give any errors and it behaved the same, so I just removed it.
I found the manual here: https://material.io/develop/web/components/text-fields
If you look at the section titled:
Text field with helper text
Here you can seen the following example:
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<input class="mdc-text-field__input" type="text"
aria-labelledby="my-label-id"
aria-controls="my-helper-id"
aria-describedby="my-helper-id">
<span class="mdc-floating-label" id="my-label-id">My Label</span>
<span class="mdc-line-ripple"></span>
</label>
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
</div>
If you look carefully at the after the label, you will see some differences.
There is even more detailed information on how to use the helper text:
https://github.com/material-components/material-components-web/tree/v7.0.0/packages/mdc-textfield/helper-text/
In the API section there is a class called mdc-text-field-helper-text--persistent which you have included. This will make the helper text permanently visible, so you don't want that.
Here is the block you should have instead of the p element after the label:
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
Enter Valid Email
</div>
</div>
PS: would be great if you could include a link to the example you were following next time.
I am a beginner, trying to teach myself code. I know HTML and have recently learnt the basics of Javascript syntax and bootstrap - I realise the best way to learn is to build something. So I am trying to build a website where users can search for famous people to see what books they recommend. For example, if I want to know what books Elon Musk would recommend, I should be able to type in his name and it would take me to a page where there is a list of all books recommended by him.
I have the index page ready looking something like google, and I am trying to understand how I can have the search bar functioning so people can search through all the pages I would build. I realise I need the auto complete feature to work so people can type in the first few letters of the person's name and click on the suggestion to go to the page.
Here's my code so far:
#content {height: 100%;}
html, body {height: 100%;}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap JS from CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Bootstrap CSS from CDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
<title>Page Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="images/logo.png" width="270" height="95" alt="Google" id="logo"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<li>Submit</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Privacy</li>
<li>Donate</li>
</ul>
</div>
</div>
</div>
</body>
</html>
as you said, best way to learn is building something on your own from scratch. To create the functionality you described you need:
server for responding to the requests made by browser. I suggest starting with Node js especially with express (https://expressjs.com/). It's really simple to install and get started.
database (or just static json file) with node you can use for example Mongo db with Mongoose (http://mongoosejs.com/)
front-end framework and libraries you are using bootstrap which is fine! Add React js (https://facebook.github.io/react/) to that and you are ready to go!
So my suggestion is to use those libraries/frameworks and learn just bit by bit. Start from server and try creating some basic pages (or just page). You can fetch the autocomplete data then with AJAX techinque. React has lot of well written components and for example for ajax autocomplete you can use this: https://jedwatson.github.io/react-select/
Happy learning!
I'm having issues getting my code: (http://codepen.io/hoschiCZ/pen/rOJmmr) to work.
<html>
<head>
<meta charset="utf-8">
<title>The title doesn't matter</title>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title"><center>MDL test</center></span>
</div>
</header>
<div class="mdl-grid" style="margin: 0px">
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
<div class="mdl-cell mdl-cell--4-col-phone mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
There is the main text/content located. This has to stay visible at all costs and screen sizes.
<br><small>Material Design Lite courtesy of Google, Inc.</small>
</div>
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
</div>
</div>
</body>
</html>
The intended columns layout & counts are as follows:
Desktop 3-6-3
Tablet 1-6-1
Phone 0-4-0
The outer numbers/cols are probably space for ads or just empty space, is just looks bad otherwise.
The problem is: it's not responsive, even after refreshing pages. I tried Chromium Linux mobile/tablet emulation and Nexus 5 Firefox & Chrome. Everywhere, the desktop version is used.
MDL requires you to include this in the header.
<meta name="viewport" content="width=device-width, initial-scale=1">
Btw I didn't see it written in the Getting Started guide, maybe add it there?
Working CodePen
Add
<meta name="viewport" content="width=device-width, initial-scale=1">
into
<head></head>
Your problem is that you haven't wrapped your .mdl-grid in a .mdl-layout__content
<div class="mdl-layout__content">
<div class="mdl-grid">row</div>
</div>
I made a jsfiddle example for you.
Just expand the window slider and you'll see what you are desiring.
I have a web app were the entire layout remains constant except for one <div>. Currently, I'm just using routes to handle links and it seems like quite a waste to reload the rest of the layout.ejs file where the only thing I wish to change is my <div>.
What would I have to change in my layout.ejs file? Here is my current file:
<!DOCTYPE html>
<html lan="en">
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script src="/javascripts/chat.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="chat">
<input type="text" id="text-input">
<input type="button" value="Send" id="send-button">
</div>
<div id="content">
<%- body %>
</div>
<div id="rooms">
</div>
<div id="footer">
<div id="footer_links">
Home | About | Contact
</div>
</div>
</div>
</body>
</html>
I was thinking about using AJAX to use this, but I've heard some good things about using partial views. I'm just not sure at all about how to set this up. Also, I've heard that it's possible to use WebSockets with partial views instead of AJAX. Is this a good idea, or even possible?
Sorry this may be straightforward. I'm having a difficult time with the documentation.
Thanks!
I just worked it out.
You can call `partial(filename)` in the view to load the partial. say we use EJS, and there is three files in `views/`:
1. layout.ejs
2. index.ejs
3. header.ejs
and the content of index.ejs is :
then, start the server, browser it, you will see `header.ejs` is loaded to `index.ejs`.
!!!　UPDATE
In the express version >=3.0, there is no partial() any more. But we can use <% include xxx.file %>, or just use another module: "express-partials". Please search it on Github.