I have a Vanilla JavaScript NativeScript app, I'd like to use icon fonts from Flaticon, as described here,
I did paste the .ttf font file, and add 'class="flaticon-airplane"' to , and I also tried giving an id to the label and apply 'font-family: "Flaticon"' style to the id, but still, did not work.
You can't use class name by default, you can only use the character code. If you are interested in using class names, you should also copy the CSS file and register the CSS path with nativescript-fonticon plugin.
import * as application from 'application';
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.paths = {
'flaticon': 'your-flaticon-stylesheet.css'
};
TNSFontIcon.loadCss();
application.setResources( { fonticon } );
Related
Is it possible to use an angular-fontawesome icon inside a sweetalert2 title?
I tried this but it doesn't work, the icon doesn't show and the inspector show size 0x0. I tried overriding the styles but I'm not very good with CSS.
swal.fire({
title: "<fa-icon [icon]="faBug" [border]="true" size="6x"></fa-icon>"
Please refer to the official documentation to learn how to pass icon to an arbitrary JavaScript library and why what you have attempted to do does not work.
Below is an example from there:
import { icon } from '#fortawesome/fontawesome-svg-core';
import { faChevronLeft, faChevronRight } from '#fortawesome/free-solid-svg-icons';
myTooltipLib({
content: `<p><b>Hint:</b> You can navigate items with ${icon(faChevronLeft).html.join('')} and ${icon(faChevronRight).html.join('')} buttons.</p>`
})
I'm working a project that will dynamically allow the user to change themes, and uses reactstrap and styled-components under the hood. We want to configure all of the variables via SASS, which is working fine. In order to make those variables available to styled-components, we have been using sass-extract-loader to create theme objects.
This all works great when we statically choose one of the themes, but I haven't been able to get it working dynamically reliably. I have two issues:
1) In development, it works fine to switch the theme once. If I change it again, my non-styled-components (i.e., raw reactstrap components) are styled with the second theme. I believe this is because the second theme is loading and overriding the original CSS.
2) In production, I get the same mix as #1 by default (i.e., because all of the CSS files are being put together into a single bundle, reactstrap components are styled one way, while styled-components "honors" the theme).
I believe the best option for us is to have the themes in two separate CSS files, and to toggle "alternate" rels on them. I just don't know how to configure CRA not to put all of the CSS into a single main bundle, and let me manually add links to alternate stylesheets. If I can split them out into separate files, I believe I can just add tags and dynamically swap the rel="alternate" property.
There may well be better ways to accomplish this. My understanding is that the easiest way to control the Bootstrap themes is via SASS variables, and I'd like to make sure those variables don't have to be re-defined when using them in styled-components.
If you want to apply styles conditionally, you can import your stylesheets in your index.js file and make it available to all your components through the context API. First of all we import the CSS files into index.js.
import themeA from './css/themeA.css';
import themeB from './css/themeB.css';
However, by using it this way, you cannot have element selectors in both CSS files, because they would be globally applied from both files. However, you could import an extra stylesheet that complements the selected theme, in which you define the element selectors.
By using CSS modules, you avoid the need for element selectors. You may want to read this article if you are unfamiliar with CSS modules: https://javascriptplayground.com/css-modules-webpack-react/
If you still need to apply element selectors in one theme, you can do so, but they will also get applied in your other theme this way.
import './css/default.css';
This example below is a modified version from the React documentation: https://reactjs.org/docs/context.html
In this example, we draw a button that changes the global theme when
it its clicked. There are three parts in this example that are crucial
to understand if you want to use React its context API.
1. Creating a Context.
Creating a Context is being done by assigning the return value of React.createContext(yourValue) to a variable. This variable can then be used to use the Provider or Consumer component inside your React components.
const ThemeContext = React.createContext();
2. Providing a value by passing it to your Provider component as prop. Now your value is accessible to all your components.
class App extends React.Component {
swapTheme() {
this.setState({ withThemeA: !this.state.withThemeA });
}
render() {
const theme = this.state.withThemeA ? themeA : themeB;
return (
<ThemeContext.Provider value={theme}>
<ThemedButton onClick={this.swapTheme} />
</ThemeContext.Provider>
);
}
}
3. Listening to updates with the Consumer component.
To listen for changes, you need to use the Consumer component. The passed function receives the theme as an argument so it can be assigned to the className prop of the button element.
class ThemedButton extends React.Component {
render() {
return <ThemeContext.Consumer>
{theme => <button className={theme.Button}}>click me</button>}
</ThemeContext.Consumer>;
}
}
I am creating a custom editor, but am not sure how to use it in xml. I tried reading tutorials online but none really explain what to use as the local variable in the xml.
I tried using xmlns:local="clr-namespace:SocialNetwork.Renderers;assembly=SocialNetwork.Renderers" but it doesn't load and when I type <local:MessageEditor/> there is no Text = or any of those options
The path to the editor is SocialNetwork.Renderers
Custom Editor Code and the path is shown (PCL class)
namespace SocialNetwork.Renderers
{
public class MessageEditor : Editor
{
}
}
The assembly should simply be SocialNetwork. So use this:
xmlns:local="clr-namespace:SocialNetwork.Renderers;assembly=SocialNetwork"
Is there a possibility to change the 'title' and/or 'button' property defined in the plugin's lang.js file via the config.js file for a specific plugin?
It is the text which is shown in the dialog title/tooltip and I would like to avoid changing it directly inside the lang.js file. Or would I have to write the devs for a more fitting translation?
Or would I have to write the devs for a more fitting translation?
If you want to change the translation in CKEditor, the recommended way is joining the Transifex translation team - https://www.transifex.com/ckeditor/ckeditor/
You can change the lang entry like it has been presented below (you can put this code inside config.js) but please note this will not be localized thus if your CKEditor supports multiple languages it is better to make this change in lang file directly.
CKEDITOR.on( 'instanceReady', function( ev ) {
console.log( editor.lang.button );
editor.lang.button.selectedLabel = 'xyz';
console.log( editor.lang.button );
});
I would like the ability to add a class to images which are added to the body field in Drupal.
I want to keep things as simple as possible for our users, whereby they don't have to add classes etc. Ideally they would just click on the image button in the toolbar, paste the URL or upload an image and set align either left or right:
Image properties for adding images in CKeditor
I've tried several options, including: CKEditor adding class to img tag but I cannot get anything to work.
The path to CKEditor is to the CDN //cdn.ckeditor.com/4.5.4/full-all
I'd like to us my own SCSS to make the images float left or right at desktop, and be centered for the small breakpoint.
The text format is 'filtered HTML'.
Is there any way I can get this to work?
Many Thanks
Update
Because I'm using the CKEditor CDN, I've added the following to my local 'ckeditor.config.js' file
config.extraPlugins = 'image, dialog, dialogui';
// Enable local "imagetoolbar" plugin from /myplugins/imagetoolbar/ folder.
CKEDITOR.plugins.addExternal( 'image', '/plugins/image/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialog', '/plugins/dialog/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialogui', '/plugins/dialog/' 'plugin.js' );
// extraPlugins needs to be set too.
CKEDITOR.replace( 'news', {
extraPlugins: 'image, dialog, dialogui'
} );
The example I copied this from has 'news' as the CKEDITOR.replace, which I'm sure is wrong, what should this be? https://www.pluginsforckeditor.com/Tutorials/149/How-to-add-a-plugin-to-CKEditor/en/n149.aspx
You can modify the image plugin in order to have the class of the image already entered. So users just have to paste URL or upload an image.
Fill the default field with what you want.
I hope to help you.