Downloaded the zip file and unzipped it into my CSS folder. All files were shown in a green font, so I used the properties dialog box to remove the encryption.
Added the reference to my html document:
<link rel='stylesheet' href="css/foundation-icons.css" />
Used an icon with the <i class="fi-[icon]"></i> suggested language.
The icon takes up space. It is in a button, so I can see the button get wider to accommodate it. But I don't see the icon itself, regardless of color or size setting. What's wrong?
The preview file works. But there was no instruction document that others have mentioned. Also, why in the preview file does it show not only the class but also what looks like an html entity, such as ?
Related
I'm using Next.js and I have a couple of SVG files inside the public directory:
/public/branding/logo.svg
/public/branding/brand.svg
/public/branding/slogan.svg
And I'm using img tag to load them:
<img src='/branding/logo.svg' />
However, the image is not shown. But I can right click on the image src in Google Chrome's Dev Tools and open the SVG in a new tab and see its content.
Though I see this message:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
What's wrong?
The problem is exactly that browser message:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
If nextjs does not show your SVG image, first open that SVG inside a browser (Chrome for example). If it shows you that message, then SVG has problems. Replace it with another SVG and it should work. It worked for me.
So, we can say that nextjs only shows valid SVG files that browser can render. It took me some days to be solved though.
I am digging into an existing reactJS site, and many images are being rendered by using the css content property. I am looking at the css sheet in VSCode, and many classes are appearing with content listed as "". I'm not sure if I need a plugin to view the actual content, but I can't find a way to see it at this point.
I can use alter the content attribute to point to a different image, but want to know where this is being generated so I can alter it at the source. The site is setup to use Contentful, but assets there are called directly on pages, not in css.
.fa-discord:after {
content: "";
}
I'd like to be able to track down where this image is being stored or generated. Any help is appreciated!
That's a Font Awesome icon for Discord, and can be found here. Yes, you need to include Font Awesome on your website if you want to render any of their glyph icons. And you can easily work out whether a website is attempting to use Font Awesome glyph icons or not, as their selectors all start with fa- and replace the content.
Font Awesome icons are generated through an included CSS file, most commonly located in a folder like /fonts/font-awesome/css/font-awesome.min.css.
This file uses unicode characters to generate the corresponding glyph representations, and the specific unicode character for the Discord icon is 392. Thus, content: "\f392" will render the relevant glyph icon.
If a box or square shows up instead of an actual glyph, that means that the font you're using doesn't incorporate that particular unicode glyph. Font Awesome rapidly expands its coverage of unicode glyphs, and you will need to update to at least Font Awesome 5.0.0 in order to use the Discord glyph.
I would like to improve the look and feel of my Remedy app by inserting Font Awesome icons where buttons appear styled. How do I implement Font Awesome icons in my Remedy app?
Create a button through the Remedy AR System WYSIWYG. In the Display properties, specify the necessary Font Awesome classes. For example, fa fa-search. In the image fields upload an Embedded Image that is completely transparent. Set the "Display as Flat Image" property to true. You can specify the Alternative Text to something useful to appear when users hover the icon, for this example, "Search".
In the Appearance properties for the view, edit the web header to upload Font Awesome CSS. For this example, the path to this Font Awesome is at "\Program Files\BMC Software\ARSystem\midtier\resources\standard\stylesheets\font-awesome".
<link href="../../../../resources/stylesheets/font-awesome/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
You may want to upload another css file to specifically style this class to the font-size and color of your choosing. Add the path for this css file in the Web Header as we have done for Font Awesome and edit the Custom CSS Style as needed.
Note, if the Image Position property is set to center, then only the icon and no text should appear. If the Image Property is set to right and the button has a label such as "Search", then it will appear as the text with a font awesome icon to the right. This pair looks pretty good when the font is styled as Header III.
If you want to change icons in Mid Tier then there are skin customization's available about which you can find on this links:
_https://docs.bmc.com/docs/display/public/ars81/Applying+skins+to+form+views
_https://docs.bmc.com/docs/display/public/srm81/Rebranding+the+Request+Entry+console
_https://docs.bmc.com/docs/display/public/srm81/Defining+skins+for+the+Request+Entry+console
but the best one is here:
_https://communities.bmc.com/thread/72471?tstart=0
I hope this helped. :)
Best regards,
Dino
In the video i uploaded on screencast you see the reload of my GWT Bootstrap3 (see https://gwtbootstrap3.github.io/gwtbootstrap3-demo/) project. The page I display is almost empty (so there are not other icons which need to be displayed).
The video starts when I hit the F5 key on my chrome browser. You'll notice that the screen reloads then the buttons show up as blank squares which are then filled oiut with the icons.
http://www.screencast.com/t/dd7B9lr6
How can I manage to show them up with their icons immediately
The buttons are placed within a Vertical Panel as a ButtonToolbar within ButtonGroups
[...]
<g:VerticalPanel addStyleNames="{styles.tables.listBeanTable} ub-AbstractSummaryWidget">
<b:ButtonToolBar addStyleNames="{styles.summary.menuBar} hiddenPrint">
<b:ButtonGroup >
<b:Tooltip title="{msgs.refresh}" container="body">
<b:Button ui:field="refreshButton" icon="REFRESH"/>
</b:Tooltip>
<b:Tooltip title="Delete meeting" container="body">
<ui:attribute name="title" description="Label for button: delete meeting"/>
<b:Button ui:field="deleteMeetingButton" visible="false" icon="REMOVE"/>
</b:Tooltip>
[...]
I am not sure whether exactly when the icons are drawn to replace the squares. Is it with the call to " initWidget(uiBinder.createAndBindUi(this));" within the constructor class of the widget?
If you were about to say: hey buy a more powerfull laptop then it'll display faster. The gwtbootstrap3 example (e.g. https://gwtbootstrap3.github.io/gwtbootstrap3-demo/#icons) ) shows up immediately correct.
Thanks for any help
Hannes
The icons are loaded from Font Awesome. They are just <i> tags with the appropriate CSS style applied - this style forces the content of the <i> tag to become the desired icon. My bet is that the problem is that the font is not being loaded "fast enough". Maybe it's not cached? Maybe it's loaded from a slower server? Check your browser's developer tools to see from where the font is loaded and how long it takes. It should loaded from a folder relative to your webapp, unless maybe when you are using the GwtBootstrap3CDN.gwt.xml module.
What really resolved the issue was the change to gwt 2.7. all performance issues disappeared.
Furthermore in the case above it helped a bit to set the ButtonToolBar invisible (setVisible("false")) in the ui.xml. and at the end of the Ctor make it visible "setVisible("true).
In the example of the grid shown in the Kendo UI website web demos area, when the column-header is dragged to the group box, the column header gets two little images: the sort arrow and the close (X). As far as I can tell, the only relevant CSS on this demo would come from the two stylesheets and the js library referenced in the head section of the page:
<script src="source/kendo.all.js"></script>
<link href="styles/kendo.common.css" rel="stylesheet" />
<link href="styles/kendo.default.css" rel="stylesheet" />
I have the minified versions of these files referenced in the head section of my own page (using the Kendo controls downloaded a few days ago) and on my page these two images on the dragged/dropped column header are not appearing in IE9 in IE9 Standards Mode, in Opera, Safari, or Chrome. Only the column header text appears there as the button text.
Is it possible that the download files and the libraries referenced in these demos are not identical?
It would be very helpful to have these demos point to an external public library so someone trying to duplicate the behavior could be certain that everything is the same.
yes from the demo code and the image file is missing in the libraries mentioned in the code ..
To make it working ..First find out the missing files using chrome Dev Tools(Press F12 and see console)..Then within the downloaded Kenodui.zip files find the Image file (here styles/Default/sprite.png) and place it with appropriate Heirarchial structure(this part is important ..you may need to create new folders for it)..