The Screenshot
Im using the Icon List widget here, but I don't know why its showing the same icon for different svg file I chose from media library.
any one have any idea of what's going on here?
Thanks for your help
I have tried to separate the widget(using two widget for two icon). I have tried delete my browser cache, tried re-uploading the svg icon file. and I also tried rename the file before uploading
Related
In posts, the Gutenberg editor will by default automatically resize via css any images uploaded as galleries, resulting in too small and blurry images.
I can't for the life of me figure out how to prevent this from happening in the first place, or find a way to revert the image size back to full size - does anyone?
Whether there's an already built in option I'm missing, or if there's a plugin that fixes this, or ideas for how to change the code. Any ideas welcome!
ps. note that when uploading single images, the right hand side toolbar has an option to change the image sizes - however this does not appear when uploading multiple images at once via gallery mode.
Cheers
Styles on Gutenberg can be added same like the classic editor through which you can add stylesheet and then target the element and manipulate styles.
Add Theme Support add_theme_support('editor-styles');
Add Stylesheet add_editor_style( 'css/custom-editor-style.css' );
If you want to change functionality or core block then it is recommended to create new block instead of manipulating core blocks because it can create layout or functional problems with other plugins.
New blocks can be created with this guide of Writing Your First Block Type.
Stylesheet of your blocks can be added by using this guide Apply Styles From a Stylesheet
These action hooks can also be used:
enqueue_block_editor_assets - for enqueuing data only on backend that is Gutenberg Editor.
enqueue_block_assets - for enqueuing data on frontend + backend
I can't seem to be able to find any information about this on the interwebs, but how do the icons in TinyMCE 4 work?
I know I can specify icons for buttons by name and specify custom icons for my custom buttons, but what if I wanted to take one of the standard icons, modify it in an image editing application and then save it as a custom icon. Where do I get the source image for that icon? Where can I see the full list of available icons and their names?
So, here is, possible, a partial answer to my own question or at least what I have managed to understand based on the poor documentation that currently exists for this aspect of TinyMCE 4.
Icons in TinyMCE 4.x use a custom IcoMoon font. The files for this font go in the skins//fonts directory.
If you download the TinyMCE Dev Package, you can find in js/tinymce/skins/lightgray/Icons.less all the icons that are available for that particular skin and you will be able to use those icons for your custom buttons (if you are using that skin).
You need to use the word between "-i-" and ":before". e.g. if the definition in Icons.less is:
.#{prefix}-i-alignleft:before
You can use the keyword alignleft as an icon for your custom button.
I haven't gotten as far as adding more icons to the default set, but I guess it would involve creating a new theme, hopefully inheriting from a parent theme, and defining your own Icons.less file and then process that LESS file to generate the appropriate CSS for your theme.
A Wordpress theme has following components:
theme.zip file
demo-content.xml
PSD.zip file (contains files such as icon-blog.psd, icon-home.psd, integrity-blog.psd, ... renew-home.psd)
Using WP Admin (WP Backend) I have managed to upload theme.zip file.
Using WP Importer I have managed to upload demo content.
However, what do I do with PSD files?
I would like to add that the current frontend looks very basic. And I assume PSD files serve to enrich frontend. But how do I use them? Where do I "import" them? How do I do it?
After taking a look at the comments, I have to say that if the tag exists, the answer should be answered here too.
Your .PSD is basically all the images that compose your theme in one editable file.
The extension of the file is meant to be opened with Photoshop and if you open it there, you should see the design of your theme ready to be cut and applied into HTML and CSS.
For Wordpress or your site it has no utility by itself, however, if you want to change some button, icon or related it's just a matter of open the editable, change it, save the image and replace it on the server.
Ex:
You bought a theme initially developed in English and you have a button which is an image that says "Register". Since it's not editable, there's no code change that can help you, so the only way you have is to open the .PSD, edit the button and save it again as image, replacing the old one.
I am looking for the cleanest way to use css font icons that match my site's preexisting icon pack instead of having to create images to use in the plugin folder.
I am open to writing custom solutions as well as using plugins.
I'm not sure if they have to match them 1 on 1, or you just want to have the same type of icons as you had, but I recently ran into and implemented font icons from fontello.com that have many existing icons and supports custom icons if really needed.
I use fontello for some icons on my website. When you download from fontello they deliver:
.ttf
.woff
.svg
.eot
css file with #font face to link all together
Everything works fine with this but I always find myself with this issue which I would like if somebody could give me a hint:
-What if I want to add a new icon into this set after downloading?
There are a lot of icons and searching for all again can bring errors. I would like to know if there is a simple method of downloading the extra icon and adding it to the set that you have already.
There actually is a built-in "Import" function which allows you to import your current set of icons and modify it:
You can try Gift Of Speed website to convert a font-file into base-64.
Good luck...