I have downloaded the Zurb Foundation icon fonts files http://zurb.com/playground/foundation-icon-fonts-3
I unzipped them and placed the /foundation-icons folder into my /css folder. Is this correct? I am trying to follow the documentation "How to use them" section and i can't figure out how to start using the classes.
I am doing this in my .html to call the classes.
<a class=".fi-social-facebook">Facebook</a>
so i assume i must of not configured/set up my file font properly.
Update: This is what my directory looks like... i am referencing it
and this is how I am calling the class.
<i class="ft-social-facebook"></i>Facebook
<i class="ft-star"></i>
Foundation icons use the <i> tags. So you would have something like <i class="fi-social-facebook"></i>Facebook.
In the zip that you downloaded, there is a preview.html file. Open it in your editor and look it over. It will make a little more sense.
Also, their CSS file doesn't include sizes. So when you use their examples to change the size (ex. <i class="fi-calendar size-24"></i>), nothing will change. In looking at their preview.html file, they had those sizes defined in the header. So I copied them out and put them in my CSS and solved the issue. Here they are if you want to use them:
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
Once you've downloaded the pack, you have to add to your <head> :
<link rel="stylesheet" href="css/foundation-icons.css" />
And be sure that the svgs folder inside your css folder, and the rest of files inside your css folder too.
When you finish this set up, try this on your html:
<i class="fi-star"></i>
It should print a star.
Quickest solution, no installation required:
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
Other versions available at https://cdnjs.com/libraries/foundicons
I installed via pip install django-zurb-foundation and was running into the same problem …/foundation/icons worked, but I couldn't reference them in my actual project. What wound up working for me is adding the following to my project's base.html
{% load foundation_tags %}
{% block css %}
{% foundation_css 'foundation-icons' %}
{% endblock css %}
Which is effectively the same as ManelMusti's answer, but handled in the template using the same technique as the example in …/site_packages/foundation/templates/foundation/icons.html
The correct way is <i class="fi-star"></i> instead of <i class="ft-star"></i>
Related
I'm trying to use Icomoon in my blazor project. I've already downloaded the icons.
HTML
<button class="search__button">
<svg class="search__button__icon">
<use xlink:href="img/icons/symbol-defs.svg#magnifying-glass.svg"></use>
</svg>
</button>
CSS
.search__button {
&__icon {
color: #444444;
width: 1.75rem;
height: 1.75rem;
}
}
The location of the SVG files
The result I'm getting
Am I missing something? I think to have followed what it's said in the documentation.
Thanks for helping
EDIT
In this documentation is says that the svg icon can be used as an image like this:
<img class="nav__level-item__icon" src="img/icons/svg/home.svg" alt="home">
When used like this, it's displaying.
&__icon {
width: 1.75rem;
height: 1.75rem;
fill: #fff; //and/or color: #fff
}
The only problem with using it as an image is that I can't style it. So, at the end, I'm still stuck.
EDIT 2
I tried to implement what's suggested in this blog post. Icons are being displayed, I can't still style them.
According to Microsoft SVG use is a still limited, in this Microsoft document it states
If you place an <svg> tag directly into a component file (.razor), basic image
rendering is supported but many advanced scenarios aren't yet supported. For
example, <use> tags aren't currently respected
If you use a string variable for the xlink:href attribute the icon will render after pre-rendering but would disappear as soon as the Blazor library was loaded in the client, but looks like there is a workaround.
Instead of putting the svg and use tags in the .razor file you can return a MarkupString instead, something like
<i class="icon">
#IconMarkupString
</i>
#code {
[Parameter]
public string IconSprite { get; set; }
private MarkupString IconMarkupString
{
get => new MarkupString($"<svg class='icon-sprite'><use xlink:href='{IconSprite}'/></svg>");
}
}
Then used like
<SVGIcon IconSprite="img/icons/symbol-defs.svg#magnifying-glass" />
One thing that I did notice was in order to get the styling to work on the SVG element itself I had to add a separate class to the SVG tag otherwise the styling would not be applied even when using ::deep.
I tried almost every combination of relative and absolute paths to the CSS file using JavaScript successfully however Sinatra and ERB are more unique.
In the Sinatra script I have the public and stylesheet directories as conventionally done. In my views directory I have the view page with the external
<link href='/some_dir/some_css_file.css' type="text/css" rel="stylesheet" />
I attempted this many times and perhaps it's some nuanced thing I am missing.
How can I get my ERB view file to load the external CSS link?
Sinatra does not have URL helper methods like Rails. I tried moving the CSS file adjacent to the view file and different combinations of relative and absolute paths to the file, but none of them worked.
This code will show a 404 in the Shotgun server log:
ERB view:
<html>
<head>
<link href='../public/stylesheets/sent' type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="/sent.css" />
</head>
<body>
CSS file:
body {
background-color: lightblue;
color: #333;
font-family: Sans-Serif;
line-height: 18px;
}
h1 {
color: green;
}
p {
color: orange;
}
In the terminal while running Shotgun I get These types of errors:
127.0.0.1 - - [05/Nov/2019:23:24:47 -0800] "GET /sent.css HTTP/1.1" 404 509 0.0543
127.0.0.1 - - [05/Nov/2019:23:24:47 -0800] "GET /public/stylesheets/sent HTTP/1.1" 404 534 0.0617
Sinatra, by default, looks for CSS files in a directory called Public, you don't have to include the folder name "Public" on your link tag.
You can still use subfolders inside of the Public folder.
This should work in this case:
<link href='/stylesheets/sent/sent.css' type='text/css' rel='stylesheet' />
If you still want to change the location of the Public folder you can do it by changing the Sinatra configuration, look for this set :public_folder, Proc.new { File.join(root, "static") }
on the following link:
http://sinatrarb.com/configuration.html
body is not closed in your CSS:
body {
background-color: lightblue;
color: #333;
font-family: Sans-Serif;
line-height: 18px;
}
h1 {
color: green;
}
p {
color: orange;
}
For future users of Sinatra making custom MVC apps:
I fixed this problem by storing the public folder in the root dir. This is a convention in Sinatra MVC to keep CSS/JavaScript/pictures in the public directory at the root of the program.
I had it incorrectly nestled in the application directory. Once I moved it up and into the root directory, my relative path <link rel="stylesheet" href="/stylesheets/sent.css" /> worked.
Font Awesome is not working in my shadow DOM since I have the following in it to prevent styles from leaking in and out:
:host {
all: initial; /* 1st rule so subsequent properties are reset. */
display: block;
contain: content; /* Boom. CSS containment FTW. */
}
I'm able to use other stylesheets by just inlining them within the :host property, but that doesn't work with Font Awesome since it uses relative paths in its stylesheet.
I found this post and tried it with the scoped CSS I implement, but the icons show as squares, as can be seen in my example.
I had the same issue with StencilJS.
After hours of struggle and the answer from #Intervalia I was able to fix it.
The problem is that the browser doesn't load the font files when they are only included in the shadow dom (your custom web component). This means that the fonts also has to be included in the normal html file (aka light DOM) so that the browser can detect and load them in order to make them available in the shadow dom.
In my case I didn't use Font awesome instead it was a custom font but I tried it a second time with font awesome and a clean Stenciljs project. The solution is always the same doesn't matter which custom font you need.
Step 1: Move the font into your project. I created a seperate "assets" folder inside the "src" folder to have access from all the components. In this example I downloaded font awesome for web environment https://fontawesome.com/download. (I wouldn't recommend "npm install" since you have to use it in the index.html too)
Step 2: Prepare your web component (in this case my-component.tsx). You can import multiple css files using the styleUrls property. Just import the fontawesome css from your assets directory.
import { Component, Prop, h } from '#stencil/core';
#Component({
tag: 'my-component',
styleUrls: [
'my-component.css',
'../../assets/fontawesome/css/all.css'
],
shadow: true
})
export class MyComponent {
#Prop() first: string;
render() {
return <div> <i class="fas fa-question-circle"></i> </div>;
}
}
Step 3 prepare the file where you want to use the component (in this case index.html). The important line is the "link" tag. This includes the "font awesome css" again and force the Browser to really download the fonts.
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Stencil Component Starter</title>
<link rel="stylesheet" type="text/css" href="./assets/fontawesome/css/all.css">
</head>
<body>
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
</body>
</html>
I know it feels wrong and looks weird but it is not enough to include font awesome only in the index html or in the web component. It must really be included in both files. That doesn't mean the Browser will load it multiple times - it will only be loaded once.
That means that you can't deliver the font with the web component - as far as i know. This isn't a stenciljs bug this is a general problem of the browsers. Please let me know if you have better solutions.
Just for fun here is a screenshot that shows that the browser doesn't load the fonts when it is only included in one file. http://prntscr.com/p2f9tc
Update 05.10.2019:
If you want to use your font inside your web-component the explanation above is correct and still necessary. But you can also use the slot tag inside the web-component. Than you automatically bypass the font from outside (the html) into the web-component. But notice it only works for the stuff you write between the tags of your web component.
That means you can use <my-component> <i class="your-font"/> </my-component>. In this case you don't have to import the font into the web components.
One thing I have noticed is that if the page does not load the CSS file then the shadowDOM won't load it either.
I really think that the only problem us that if the font is not defined on the page that it will not work in the component since the rest of the CSS seems to properly apply to the shadowDOM elements.
This example shows just the shadowDOM trying to load the CSS and it does not work:
let template = `
<style>
:host {
display: block;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<header>
<h1>DreamLine</h1>
<nav>
<ul>
<li>Tour</li>
<li>Blog</li>
<li>Contact</li>
<li>Error</li>
<li><i class="fa fa-search"></i> Search</li>
</ul>
</nav>
</header>
`;
class MyEl extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'}).innerHTML = template;
}
}
customElements.define("blog-header", MyEl);
<i class="fa fa-battery-full" style="font-size: 45px;"></i>
<hr/>
<blog-header></blog-header>
<hr/>
And this example shows both the page and the shadowDOM loading it and it works:
let template = `
<style>
:host {
display: block;
}
</style>
<header>
<h1>DreamLine</h1>
<nav>
<ul>
<li>Tour</li>
<li>Blog</li>
<li>Contact</li>
<li>Error</li>
<li><i class="fa fa-search"></i> Search</li>
</ul>
</nav>
</header>
`;
class MyEl extends HTMLElement {
connectedCallback() {
const styles = document.querySelector('link[href*="fontawesome"]');
this.attachShadow({mode: 'open'}).innerHTML = template;
if (styles) {
this.shadowRoot.appendChild(styles.cloneNode());
}
}
}
customElements.define("blog-header", MyEl);
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<i class="fa fa-battery-full" style="font-size: 45px;"></i>
<hr/>
<blog-header></blog-header>
<hr/>
The code I like to use looks for the <link> tag I want in the body and then uses a clone of that tag inside the shadowDOM. This way my component is not out of sync. Yes, this can cause problems if the component was not expecting a change in the CSS but I find it works well for my projects.
If you don't need shadow: true then you can load the all.min.css directly via the index.html or the main application. Even loading the all.min.js file works.
If you need it within the shadow dom, then you need to load the all.min.css in index.html and also load it within shadow root using something like this.
`
componentDidLoad(): void {
this.hostElement.shadowRoot
.getElementById("some_Id")
.insertAdjacentHTML(
"afterbegin",
`<link rel="stylesheet" href="${getAssetPath(
"/fontAssets/fontawesome-free/css/all.min.css"
)}" />`
);
}
`
I wanted to share what I did for loading in Font Awesome icons to my stencil components (shadow enabled)...
After several hours into researching this topic, I think I've discovered a solution that will be the most efficient for my components to be bundled in a agnostic way and free of any additional style sheet includes in the HTML header.
My solution was to use the stencil-inline-svg module and then import the svg file directly from the Font Awesome module like this:
// the reference to the svg can be anything (searchIcon name).
// just make sure to import the correct svg from fontawesome node modules.
import searchIcon from 'fontawesome/svgs/regular/search.svg';
#Component({
tag: 'search-icon',
styleUrl: 'search-icon.scss',
shadow: true,
})
export class SearchIconComponent {
render(){
return (
{/* Not ideal to use innerHTML but this renders the full SVG markup */}
<span class="search-btn" innerHTML={searchIcon}></span>
)
}
}
Now, I can set css rules to modify the color and size of my icon like this
.search-btn {
width: 40px; // Set SVG size at the parent.
svg path {
fill: #fff; // Update svg path color.
}
}
Obviously this requires a little bit of Font Awesome icon knowledge so you know which icons to import.
Shadow Doms's style is scoped. And it does not interfere with outer style
FWIW I created a helper method to create a link for font-awesome at the parent page level. Not sure if this is in violation of any custom-elements/Web Components standards but I'll go ahead and post here in hopes that I'll be corrected :) It works for my use case w/ internal web applications for now though.
export const addFontAwesomeStyles = () => {
injectStylesheet("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
injectStylesheet("https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css");
}
export const injectStylesheet = (href: string) => {
const links = document.head.querySelectorAll("link");
// Already been injected
for(let l in links)
if(links[l].href == href) return;
const link = document.createElement('link');
link.rel = "stylesheet";
link.href = href;
document.head.appendChild(link)
}
Then in your StencilJS component's construtor you can use it like so:
//...
constructor() {
addFontAwesomeStyles();
}
Here is my website : http://sourcingstrategybd.com/
I want to change (margin-bottom:100px;) in (#header-wrapper-sticky-wrapper)
but I cant find this exact location in folder => file.
Please help me, how can I change this margin.
For details please view this Image
This style comes from javascript.so this css code will be removed from js file
If you can't do this from your header php file you should be able to achieve this from your css files I believe.
Put this
#header-wrapper-sticky-wrapper {
margin-bottom: 0!important;
}
This must work unless your'e doing any mistakes.
Thanks
Add this code to your stylesheet:
#header-wrapper-sticky-wrapper.sticky-wrapper {
margin-bottom: 0 !important;
}
Its look like inline style css
so change it from that php file. or another way.
add this in your css.
.sticky-wrapper {
margin-bottom: 0 !important;
}
Still not work then try this
#header-wrapper-sticky-wrapper {
margin-bottom: 0!important;
}
$(document).ready(function(){
$("#header-wrapper-sticky-wrapper").css('margin-bottom','0px');
})
You can add this script in your footer
I need to provide tinymce a css file to take the styles from, but if I set in any file something like
body{
font-size: 14px;
}
it will set the webapp's body to that style and not only tinymce's input box.
How do I give tinymce a content.css file with the asset pipeline involved?
the proper format for this is to write
body.mceContentBody {
font-size: 14px;
}
or in TinyMCE 4.x (class name changed)
body.mce-content-body {
font-size: 14px;
}
and the tinymce (if using the gem) should be
<%= tinymce :content_css => asset_path('application.css')%>