How can I replace the button icons in fancybox 3 (close, arrow, etc.) by Font Awesome icons?
Basically, to customize icons, simply use btnTpl option, like so:
btnTpl: {
download: '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}" href="javascript:;">' +
'<i class="fas fa-arrow-down"></i>' +
"</a>",
// etc..
}
Here is a demo with all icons replaced by Font Awesome - https://codepen.io/fancyapps/pen/YgmBOx
To be honest, free icons look quite ugly, I would suggest to either go pro, choose another icon set or stick with defaults.
Related
I decided to write the name of this plugin of mine as vim↪softwrap rather than vim-softwrap, but, to my surprise, GitHub shows the ↪ as an icon:
What can I do to avoid that?
I'm not sure whether it's GitHub that is doing it or it's the Markdown specification to require it.
It looks like it's using these fonts (the css selector being the <g-emoji> tag that it inserts around emoji unicode):
g-emoji {
font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
If you save this as an html file an open it, you will see the same thing:
<p style='font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'>↪</p>
I’m new with Ionic React and I’m looking for the correct way to integrate custom fonts and a custom icon set into my project, so that it’s working on all platforms as intended.
Custom Icon set
My goal is to make my custom icons work with IonIcon so that I can use the default styling options like “size” and the CSS variables (e…g --ioinc-stroke-weight).
What I did so far:
I added the icon set (all icons are svgs) into “public/assets/customicons/”
I imported IonIcon into my components where needed
Integrated the (e.g. )
So far the icons are displayed as intended and custom attributes “size” is working.
But, I’m not able to set the icon color or stroke-width programmatically. All the icons have set a default attributes (e.g. < g fill=“none” fill-rule=“evenodd” stroke="#092A5E" stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“8” >). Even if I remove those default attributes, I’m not able to set them via CSS variables
Question 1: Is “public/assets/customicons/” the correct folder to store the icons?
Question 2: How can I make it work that I can change the color of the icon via CSS?
Custom Font
Goal: I want that the custom font is shown on all platforms
What I did so far:
Added the custom fonts in “src/assets/fonts/”
Created a “fonts.css” in “src/theme/” where I integrated the font via “#font-face”
#font-face {
font-family: ‘FONTNAME’;
src: url(’…/assets/fonts/FONTNAME.ttf’);
font-style: normal;
font-weight: 400;
font-display: swap;
}
assigned the font to differnet elements
Question 1: Is this the correct folder to store the custom fonts? (I wasn’t able to do the same when the custom font was saved under “public/assets/fonts/” like the icon set)
Unfortunately, I wasn’t able to find any docs, tutorials or posts on any of these topics.
Thanks for your help!
I try to use a custom SVG for my GNOME shell extension as status icon in top panel. But the custom icon is never shown, just the widget's label text. And I find no error in log output.
When I try to set a build-in icon like "system-search-symbolic" it works, this icon is shown.
This is my code snippet (the SVG is in an "icons" directory of my extension: /home/myusername/.local/share/gnome-shell/extensions/my-widget#my-widgets/icons/timeclock-16x16.svg):
// ...
let widgetBoxLayout = new St.BoxLayout();
let iconPath = `${Me.path}/icons/timeclock-16x16.svg`;
// just for debug if path is correct
log(`${Me.metadata.name}: Icon path=${iconPath}`);
let gicon = Gio.icon_new_for_string(`${iconPath}`);
let icon = new St.Icon({ gicon: gicon, style_class: 'system-status-icon', icon_size: 16 });
// this works for build-in icon:
//let icon = new St.Icon({ icon_name: 'system-search-symbolic', style_class: 'system-status-icon'});
widgetBoxLayout.add(icon);
widgetBoxLayout.add(this.widgetText);
//...
Maybe it's a problem that there is an "#" char in icon path?
But why no error is logged?
What is the correct code to use a custom icon for status panel?
(I have GNOME Shell 3.30.2)
Oh no! This one of these "fight for weeks alone, finally ask the crowd, suddenly know the solution yourself" cases ...
The icon was actually visible but since I use a dark theme and the icon itself is also dark it was not "visible". I inverted the colors of this icon and now I can see the icon next to my text in top panel.
Now I have to find out which icon to use depending on user's theme, but the original issue is solved.
Maybe this answer helps other developer making same stupid error.
You need to use -symbolic icons to allow automatic theme aware re-colorization of the icons. Just change the file name of the icon to timeclock-symbolic.svg, at least this should be your first step if every other aspect is fine.
I have Added a new option in TinyMCE CharMap . but since font was not supporting in client system so how do we import custom font to Rupess symbol appear perfectly .
tinymce.PluginManager.add("charmap", function(e) {
function t() {
return [
["8377", "Rupess Symbol"],
["160", "no-break space"],
..So on
["8207", "right-to-left mark"]
]
}
Please any one suggest or provide live fiddle with font supported and display Rupess Symbol . since we can't install font on client systems . Thanks
Are you asking how you get a client machine to use a font you want to support a symbol? Effectively you can't control what someone installs on their machine.
What you may be able to do is use inline styles to define the font family for the symbol to a font family that would work on most platforms?
Perhaps something like this:
<span style="font-family: 'Sans-Serif';">₹</span>
In my brief testing this renders on Windows and Mac machines.
I have two questions
Can this code be added to blogger?
Can this code embed unicode fonts? and if can, please tell me the link how to do it.
I can't see your code Kotaro ,
but any code can added to blogger and and by default embedding font in web is not available . but you can use CSS 3.0 to force user to use from the font you like, this css property is
font-url
and you can use it as any other css property like
<div style="direction:ltr;text-align:left;font-size:small;font-url:('../resources/fonts/YourFont.ttf');"> you code </div>
just note that this CSS property just available at css 3.0 and now just Firefox 3.5 supports it so I recommand you Ignore it for now,
if you want to show a speciall text just use from a font that you know your users have it, like (Arial , Tahoma , Verdana ) for windows usres
for code you can use these software
1- copysourceashtml
http://copysourceashtml.codeplex.com/
that is a opensource software
copysourceashtml http://i3.codeplex.com/Project/Download/FileDownload.aspx?ProjectName=copysourceashtml&DownloadId=78099
2- Postable
http://vahid.nasiri.googlepages.com/postable.rar