so I'd like to display bootstrap 3 icons in a shadowroot added from a chrome extension content script. So far its not working, help?
manifest.js does include the woff file in web_accessible_resources
shadow root has style tag with:
#import url(chrome-extension://__MSG_##extension_id__/fonts/glyphicons-halflings-regular.woff2);
What am I missing?
To import a font, you should not use #import url which is used to import a CSS stylesheet.
Instead, you should use the #font-face directive.
Also, this directive should be placed in the <head> element of the HTML page, not inside the Shadow DOM.
host.attachShadow( { mode: 'open' } )
.innerHTML = `
<style>.icon { font-family: Icons; color: green ; font-size:30pt }</style>
<span class="icon"></span>`
#font-face {
font-family: "Icons" ;
src: url("https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2") format("woff2")
}
<div id=host></div>
You can read this SO answer for further details.
Related
My question is how does the /admin/djangocms_icon/includes/assets.html file look like? Can someone give a sample supposing I am using font awesome 5? Below are the configuration settings that I followed on Github.
Configuration
This addon provides a default template for all instances. You can provide
additional template choices by adding a DJANGOCMS_ICON_TEMPLATES
setting::
DJANGOCMS_ICON_TEMPLATES = [
('svg', 'SVG template'),
]
Web Font Icons
##############
The django CMS Icon plugin ships with Font Awesome 4 as default. This can
be changed by overriding the following setting::
DJANGOCMS_ICON_SETS = [
('fontawesome4', 'fa', 'Font Awesome 4'),
]
To use Font Awesome 5 in the above example; see the options below from the DJANGOCMS_ICON_SETSlisted.
In addition you need to load the resources for your fonts in /admin/djangocms_icon/includes/assets.html. Add this file to your project
in order for the icon picker to pick up your custom icons in the admin.
The icon picker supports numerous font libraries <http://victor-valencia.github.io/bootstrap-iconpicker/>
out of the box. You can also add multiple font sets like this::
DJANGOCMS_ICON_SETS = [
('elusiveicon', 'el', 'Elusive Icons'),
('flagicon', 'flag-icon', 'Flag Icons'),
('fontawesome4', 'fa', 'Font Awesome 4'),
('fontawesome5regular', 'far', 'Font Awesome 5 Regular'),
('fontawesome5solid', 'fas', 'Font Awesome 5 Solid'),
('fontawesome5brands', 'fab', 'Font Awesome 5 Brands'),
('fontawesome5light', 'fal', 'Font Awesome 5 Light',
'5.3.1_pro'),
('glyphicon', 'glyphicon', 'Glyphicons'),
('ionicon', 'ion', 'Ionicons Icons'),
('mapicon', 'map-icon', 'Map Icons'),
('materialdesign', 'zmdi', 'Material Design'),
('octicon', 'octicon', 'Octicons'),
('typicon', 'typcn', 'Typicons'),
('weathericon', 'wi', 'Weather Icons'),
]
I just had to figure this out myself. It depends on whether you're trying to include a preconfigured font or your own.
Including preconfigured fonts
There is an example of an assets.html provided in the official repository at djangocms_icon/templates/admin/djangocms_icon/includes/assets.html and it's in fact linking to Font Awesome 5 (5.3.1 specifically):
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
In order to include another font:
Copy the assets.html file into your templates folder at templates/admin/djangocms_icon/includes/assets.html (it overrides the template's default),
Add another <link> referring to your (external or local) font(s) of choice,
Add the references in your settings.py's DJANGOCMS_ICON_SETS by copying the respective element(s) from the docs.
Including custom fonts
For custom fonts, it's a tad more complicated. In my case, I only had a single .ttf file with custom icons, no CSS. In this case, the assets.html looks like this:
{% load static %}
<link rel="stylesheet" href="{% static 'css/icons/my_icons.css' %}">
In my_icons.css, include the font with an #font-face-rule and add a general myicon class plus individual classes for each of the icons:
#font-face {
font-family: "My Icons";
font-weight: normal;
font-style: normal;
src: url("../../fonts/MyIcons.ttf") format("truetype");
}
.myicon {
font-family:"My Icons";
font-style: normal;
font-size: inherit;
}
.myicon-A:before {
content:"A";
}
.myicon-B:before {
content:"B";
}
.myicon-C:before {
content:"C";
}
...
Next, put a JSON file at static/js/my_icons.js (or wherever you want) with a list of all the icon classes:
{
"iconClass": "myicon",
"icons": ["myicon-A",
"myicon-B",
"myicon-C",
"myicon-D",
...
]
}
(To generate all possible symbols, I opened the font in MacOS's font manager, copied all of the glyphs with cmd-A/cmd-C - they are really just letters - and used that to generate the rules with a short Python script.)
Finally, in your settings.py, you load the JSON and set up the reference to your custom font:
with open('path/to/static/js/my_icons.js')) as iconfile:
MY_ICON_SET = iconfile.read()
DJANGOCMS_ICON_SETS = [
(MY_ICON_SET, # = the content of the JSON file
'myicon', # = the css class
'My Icons' # = the label in the admin interface
),
]
That should be it. Don't forget to include your custom font in your website as well (e.g. in the header of your base.html template) for the icons to show up in the content as well.
<style>
color: red;
</style>
Some html content!
this code does not work. In the Angular framework it can be done by using the :host selector. :global can't help in my case, because I just want to style the component, where these styles are written.
How can I do this in Svelte?
Thank you
PS. I'm pretty new in Svelte :)
<style>
.hello {
color: red;
}
</style>
<div class='hello'>Hello world</style>
This will style all elements with the hello class and only in this component.
Now if we do something like this
App.svelte
<script>
import A from './A.svelte'
import B from './B.svelte'
</script>
<div>
<A/>
<B/>
</div>
A.svelte
Hello
B.svelte
world
then svelte renders that as
<div>Hello world</div>
And there's no way to define a selector to style only "Hello" but not "word". The documentation also mentions that it need something to attach a class to:
CSS inside a block will be scoped to that component.
This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. svelte-123xyz).
I am using LitElement and I am trying to load google-font at the element level.
I have tried returning it in an HTML literal in the connectedCallback event, but it does not work.
I could not manage to do it in the get styles() method.
Where should the <link...> statement be placed in the code?
You can import an external style sheet by adding a <link> element to your template, For details, see Import an external stylesheet.
Here's the demonstrate on StackBlitz.
You could import the google font in index.html easily:
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">
or you could create a common style.js file and include it:
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<style>
#import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
html,
body {
font-family: 'Roboto', Arial, sans-serif;
height: 100%;
margin: 0;
}
...
</style>`;
document.head.appendChild($_documentContainer.content);
var importDoc = window.document;
var style = importDoc.querySelector('style');
document.head.appendChild(style);
or:
class MyElement extends LitElement {
render() {
return html`
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
`;
}
}
demo ( See the red a tag as I imported Kaushan+Script )
I have a font in a fonts/ directory. How do I load this into the game, then use it on a text object in my game? I haven't been able to find anything on using fonts in Phaser 3.
First use css to load your font(#fontface):
<style media='screen' type='text/css'>
#font-face {
font-family: font1;
src: url('media/yourfont.ttf');
font-weight:400;
font-weight:normal;
}
</style>
And then use a div to load your font:
<div style="font-family:font1; position:absolute; left:-1000px; visibility:hidden;">.</div>
Now you can put it in add it in your game:
this.add.text(190, 136, 'text', {
fontFamily: 'font1',
});
Pure JS Solution:
Here's a small function I made, which only requires the font name and url:
function loadFont(name, url) {
var newFont = new FontFace(name, `url(${url})`);
newFont.load().then(function (loaded) {
document.fonts.add(loaded);
}).catch(function (error) {
return error;
});
}
And use it like:
loadFont("mixolydian", "assets/fonts/mixolydian.ttf");
That's it! You can now use your custom font in Phaser. All you have to do is change the fontFamily value to your new font name (i.e. mixolydian).
I'm using https://github.com/styled-components/styled-components.
I'm trying to work out the best strategy for components that require #font-face. I want to make sure each component is independent of its context, so I'm defining font-family styles on each them. But if I use injectGlobal in multiple components, I get multiple #font-face rules for the same font.
Should I just define the #font-face rules in my ThemeProvider entry-point component and live with the fact that the desired font might not be loaded by the browser?
That's exactly why we made injectGlobal. If you take a look at our docs they say:
We do not encourage the use of this. Use once per app at most, contained in a single file. This is an escape hatch. Only use it for the rare #font-face definition or body styling.
So what I'd do is create a JS file called global-styles.js which contains this code:
// global-styles.js
import { injectGlobal } from 'styled-components';
injectGlobal`
#font-face {
font-family: 'My custom family';
src: url('my-source.ttf');
}
`
As you can see, all we do here is inject some global styling-in this case #font-face. The last thing necessary to make this work is to import this file in your main entry point:
// index.js
import './global-styles.js'
// More stuff here like ReactDOM.render(...)
This will mean your font-face is only injected once, but still all of your components have access to it with font-family: 'My custom family'!
Doing it this way will give you a flash-of-invisible-text (FOIT), but that has nothing to do with styled-components-it'd be the same if you were using vanilla CSS. To get rid of the FOIT requires a more advanced font loading strategy rather than just #font-faceing.
Since this has nothing to do with styled-components, I highly recommend watching these two Front End Center episodes to learn more about how to best do this: "Crafting Web Font Fallbacks" and "The Fastest Webfont Loader in the West"!
And on the other side of the same coin in Chrome:
do not use #font-face inside injectGlobal if using e.g. react-router.
You will get re-paint of all of you app on each newly loaded route.
And this is why:
Same font-files downloaded on each new route.
As soon as you include font-face in a separate .css file - problem solves as stated in the last comment in this github issue.
injectGlobal is deprecated. Use createGlobalStyle
import { createGlobalStyle } from 'styled-components'
export const GlobalStyle = createGlobalStyle`
body {
font-family: 'Muli', sans-serif;
h1 {
font-weight: 800;
font-size: 36px;
p {
font-size: 18px;
}
}
`;
Then you can use it in your App.js:
import { GlobalStyle } from './styles/global'
class App extends Component {
render() {
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyle/>
<Container/>
</>
</ThemeProvider>
)
}
}
I agree
I get reloaded with
import { createGlobalStyle } from 'styled-components';
import { silver } from 'shared-components/themes/colors';
export default createGlobalStyle`
#font-face {
font-family: "Proxima Nova";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/static/media/fonts/proxima_nova/ProximaNova_300.otf");
}
and react create app