I upgraded to Font Awesome 5 (FA 5) from version 4.7. The reason was the layered icons.
In FA 4.7, fa-stack classes were used. In FA 5, fa-layers are much powerful.
The problem, as far as I see, fa-layers are only implemented in pure js version of Font Awesome. (using fontawesome-all.js). If you want to use css version, you do not see fa-layers class anywhere in folder structure (in the current version of 5.0.8). Is it possible to use fa-layers with css version of FA 5?
By css version I mean this:
<head>
<!--core first + styles last-->
<link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">
</head>
Bt Js version, I mean this:
<head>
<!--load everything-->
<script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>
Since fontawesome-all.js replaced all i tags to svg, css manipulation is difficult with this version. So, if css version has all the features that Js version has, I would like to us css version of FA 5.
No, Webfonts with CSS does not have all of the features that SVG with JS has. The How to Use SVG with JS page shows some of the features that are new or exclusive to SVG with JS. Layers, specifically, are new to SVG with JS:
Layers are the new way to place icons and text visually on top of each
other, replacing our classic icons stacks.
You can still use stacks in Webfonts with CSS to do some interesting things: codepen example
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fal fa-circle fa-2x fa-stack-1x fa-inverse"></i>
<i class="far fa-triangle fa-stack-1x fa-inverse"></i>
</span>
But stacks are definitely not as powerful as Layers with Power Transforms, which are only available in SVG with JS.
I prefer using the Web Fonts version as well, mostly for performance reasons. I also wanted to use the more advanced layered icons with the fa-layers class.
I recreated some of the fa-layers functionality in CSS and put the stylesheet up on GitHub. It's not perfect or complete. I'm still working on it, but it might help you get some of the missing functionality without switching away from Web Fonts and CSS.
Related
I am working on https://github.com/hjnilsson/country-flags
basically the instruction said just npm install --save svg-country-flags
which i did but I am not sure what how to show the right flag or even the size on the markup or render method in react.
The docs even provided this: http://hjnilsson.github.io/country-flags/
Usually there is some kind of HTML/CSS like <span className="icon au"></span> like that but there are no further docs. Any idea?
The repository provides "all the worlds flags in SVG and PNG format". Meaning it's just a collection of images in convenient formats. It also provided functionality to resize images to specific dimensions if needed.
To use it, install the repo as you specified
npm install svg-country-flags --save
It will then download the repository and store the SVGs and PNG in node_modules/svg-country-flags/
To use it just as it is you could just include a flag using the standard img element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example using svg-country-flags</title>
</head>
<body>
<img src="node_modules/svg-country-flags/svg/no.svg" height="50px" width="50px" title="Norwegian flag" />
</body>
</html>
If you need images of a specific size, read the documentation as to how to do just that.
You may try the IP2Location™ Country Flags from IP2Location that contains the flag images of 249 countries around the world as according to ISO3166 standard.
By linking to the ip2location-image-sprite.css, the country flag images can be called easily with the following code:
<i class="ip2location-flag-16 flag-au"></i> //for au flag in 16px
<i class="ip2location-flag-32 flag-us"></i> //for us flag in 32px
I am creating a website using the bulma.io framework. One of the advantages of Bulma is that it's very responsive to changing the size of your screen, which makes it great for mobile.
However, for me, I don't want this functionality. I want the site on mobile to look exactly the same as on desktop, simply zoomed it so the viewer can still see what they want with the right layout.
I'm not at all a CSS/HTML/JS expert and I'm very new to web design, but I was wondering if anyone has a solution for this?
By default, columns are only activated from tablet onwards. This means
columns are stacked on top of each other on mobile. If you want
columns to work on mobile too, just add the is-mobile modifier on the
columns container.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
<div class="columns is-mobile">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
https://bulma.io/documentation/columns/responsiveness/
Here is my code so far, basically i'm just trying to create a well behind everything. It will be a single column of content.
<div class="well" id="well">
<h1>Aphex Twin</h1>
<h6><em>The genius behind IDM's greatest tracks</em></h6>
<center><a href><img align="middle" src="http://img.photobucket.com/albums/v669/Baloonda/Webmaster%20stuff/1739519.jpg" width="682.666 height="416"/></a></center>
</div>
I don't know what I did wrong. This is all html. I'm not sure if the divs are css properties exclusively? Is there a way to do this with bootstrap? After a couple different tries I still couldn't get it to work. This is my best guess.
sidenote: I'm using http://codepen.io maybe there is a known bug which doesnt allow wells to be made?
Did you try putting it inside a container
<div class="container">... </div>
And linked to a bootstrap stylesheet?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
If in trouble, try look to here for examples: https://www.w3schools.com/bootstrap/bootstrap_wells.asp
I cannot figure out how to change a text in the header section of my site. I am trying to do this in my custom module's theme. This is how my header looks like:
<header>
<div class="container">
<div class="row-fluid">
<div id="Logo"><h1>#WorkContext.CurrentSite.SiteName</h1></div>
<h3>[ We Know Business ]</h3>
<a class="btn btn-navbar btn-menuh" data-parent="#collapse-nav" data-target=".collapse-menuh">btn</a>
<a class="btn btn-navbar btn-search" data-parent="#collapse-nav" data-target=".collapse-search">btn</a>
</div>
</div>
</header>
I changed [We Know Business] to [We know Businesses] but the updated text is not coming up on any page of my site.
However, my main objective is to use HTML5 and Responsive compatibility in IE8 by injecting conditional CSS and js like this:
<!--[if lt IE 9]>
<script src="/themes/intrust/js/html5shiv.js"></script>
<![endif]-->
I cannot see the above snippet in "View Source" option.
The reason I changed the text only to check whether I am doing it at the right place or not. When it didn't work I turned Shape Tracing tool on to see what template is being used for the header. But could not highlight any part of the header at all!
Isn't Layout.cshtml of my custom theme liable to render the header section? If not, which template I have to look for?
I must be doing something wrong here but cannot figure out what! Please help!
NB: I tried resetting IIS several times but had no luck either.
This is a bit late but what you are looking for is overriding document.cshtml.Orchard has a default in the folder Orchard\src\Orchard.Web\Core\Shapes\Views folder. Copy the file document.cshtml to your theme and put the items that you want in the header section of this document.
I would like to have each and every page on my site to have a skeleton structure as mentioned below. Based on the template selected by the user (saved choice/default css) the appearance of the page changes.
I am planning to use 960.gs or blueprint CSS framework for layout handling.
I am a newbie to CSS and layouts. Best example for my requirement would be how its done on jimdo.com/weebly.com. I am looking for advice so that I can learn this fast and implement it in iterations.
Whats the best approach to solve such design problems. I am sure it needs creative bend but as of now I would like to take bookish approach so that I can use it for my own solution.
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
This 3 column layout generator may help.