Icon Html
Phebe Aherns
The objective of this technique is to show how to semantically identify an element that uses a font file for icons. When a user overrides font-family these icons typically disappear unless there is a means to identify them. The point is to provide a technique to differentiate icon fonts from general font (text) usage.
Some low vision users need user stylesheets, scripts, or extensions to override the fonts on a page to perceive text content. However, they need to be able to perceive icon fonts that are meaningful, such as a star signifying a favorite, or an email icon in a link.
The key is for the author to semantically markup icon fonts with role="img". Then the user's font replacement selector can hook into that semantic and exclude role="img". This results in those icon fonts being shown.
In this example a two colored star icon is created by stacking two fonts with different colors on top of each other. This way it's possible to mimic only half the star is filled. It is not interactive and does not disappear if the user overrides the font family via CSS.
In this example an email icon is in a link with no visible text. It does not disappear if a user overrides font family. The icon font is identified by assistive technology as a "link image" and the name "Email" (keyboard or mouse).
This example already has a visible text label in the link to be used as an accessible name, the mail and chevron font icons must stay visible when the font family is changed. This can be done by ensuring the icons are contained in their own element and the attribute aria-hidden="true" is used so the font icons will be ignored by assistive technologies.
QMessageBox supports four predefined message severity levels, or message types, which really only differ in the predefined icon they each show. Specify one of the four predefined message types by setting the icon property to one of the predefined icons. The following rules are guidelines:
Predefined icons are not defined by QMessageBox, but provided by the style. The default value is No Icon. The message boxes are otherwise the same for all cases. When using a standard icon, use the one recommended in the table, or use the one recommended by the style guidelines for your platform. If none of the standard icons is right for your message box, you can use a custom icon by setting the icon pixmap property instead of setting the icon property.
Constructs an application modal message box with the given icon, title, text, and standard buttons. Standard or custom buttons can be added at any time using addButton(). The parent and f arguments are passed to the QDialog constructor.
The advantage of using an SVG sprite is that only one file needs to be loaded into the browser. Custom SVG sprites that contain only the icons needed in the application, can provide performance benefits compared to standalone SVG images.
In situations where icons are used to convey information on their own (e.g., in a table column to convey a value in a graphical manner), they need to be given an accessible name and an ARIA image role attribute in order to be announced correctly by screen readers.
This section shows how to configure an application's icon for various platforms. Documentation about splash screen images can be found in the Cordova-Plugin-Splashscreen documentation Splashscreen plugin docs.
Instead of using a single image for an icon, you can use two images (background and foreground) to create an Adaptive Icon. To use Adaptive Icons in Cordova, at minimum Cordova CLI 9.0.0 and Cordova-Android 8.0.0 is required.
Android 13 has introduced themed icons which are monochrome images appended to the existing Adaptive Icons. To use Themed Icon in Cordova, at minimum Cordova CLI 12.0.0 and Cordova-Android 12.0.0 is required.
Note: In this example, the foreground image will also be used as the fallback icon for Android devices that do not support the adaptive icons. The fallback icon can be overridden by setting the src attribute.
Customized icon(s) can be declared with the element(s) in the config.xml file. There are two types of icons that can be defined, the application icon and the package installer icon. These icons should be defined in the Electron's platform node .
You can supply unique icons for the application and installer by setting the target attribute. As mentioned above, the installer image should be 512x512 pixels to work across all platforms.
To access the data from the HTML file in your app, you must first implement a JavaScript function named setup inside script tags in your HTML file. In this setup function, define and initialize a local JavaScript htmlComponent object that links to the MATLAB HTML object. Then add a button callback in the setup function to generate random numbers using this JavaScript object.
To plot the random numbers in your app, create a DataChangedFcn callback for the HTML UI component. The callback functions in the HTML file and App Designer work in conjunction. When you click the HTML button in the app, the JavaScript button callback executes and generates a random number. The JavaScript function stores the random number in the Data property of the htmlComponent object which is synchronized with the Data property of the MATLAB HTML object. Because the data value changed, MATLAB executes the DataChangedFcn callback.
A favicon, or browser icon, is a small square image that displays next to a page's title in browser tabs and in other places across the web. Adding a custom favicon makes your site recognizable in a browser full of tabs or bookmarks.
All Squarespace sites start with our default cube favicon. If you leave it as-is, people who know the icon will recognize that you're part of the Squarespace community. You can replace it with your own image to better fit your site's brand.
Favicon images work best across all browsers when sized between 100px 100px and 300px 300px, though they display at 16px 16px. These are the standard favicon dimensions. While some browsers support larger favicon files, all will support that size.
Search engines that display your favicon in search results may have their own requirements. For example, Google requires that your favicon be a multiple of 48px square, like 48x48px, 96x96px, 144x144px and so on. To ensure your favicon displays in search results, find the search engine's recommendations for favicon display and set your image to meet those requirements.
But alas! We can still win here. If we combine the markup technique and pseudo element technique, we can insert the icon with no VoiceOver weirdness. And as a double-win freebie, this combined technique is ideal for keeping our CSS lean and mean as it requires no class-name-bloat and works well with the next use case we need to cover.
Just for the record, I must say that the older version of my tool was available even before the pictos server. And it was the first to allow building custom icon fonts. You can look at the changelog page in my site.
The IcoMoon default CSS suggests the [class^="icon-"], [class*=" icon-"] selectors, which is a concern regarding browser performance. But the [data-icon] selector seems to work quite well (60ms increase).
The article is from 2011 but these issues are still relevant. If you turn off Web fonts (IE9+ disables them if you turn on the Protected Mode!) or override the default font in the browser, a bunch of random letters / numbers gets displayed instead of the icons. This is exactly what happens here, at CSS-Tricks, and many other websites.
The simple example below, which can be clipped and saved in a header.html file, illustrates these query options. Note that the unknown "X" argument, for the submit button, is listed last to assure the arguments are all parsed before mod_autoindex encounters the X=Go input.
AddAlt provides the alternate text to display for a file, instead of an icon, for FancyIndexing. File is a file extension, partial filename, wild-card expression or full filename for files to describe. If String contains any whitespace, you have to enclose it in quotes (" or '). This alternate text is displayed if the client is image-incapable, has image loading disabled, or fails to retrieve the icon.
AddAltByEncoding provides the alternate text to display for a file, instead of an icon, for FancyIndexing. MIME-encoding is a valid content-encoding, such as x-compress. If String contains any whitespace, you have to enclose it in quotes (" or '). This alternate text is displayed if the client is image-incapable, has image loading disabled, or fails to retrieve the icon.
AddAltByType sets the alternate text to display for a file, instead of an icon, for FancyIndexing. MIME-type is a valid content-type, such as text/html. If String contains any whitespace, you have to enclose it in quotes (" or '). This alternate text is displayed if the client is image-incapable, has image loading disabled, or fails to retrieve the icon.
Since the File argument may be a partial file name, please remember that a too-short partial filename may match unintended files. For example, le.html will match the file le.html but will also match the file example.html. In the event that there may be ambiguity, use as complete a filename as you can, but keep in mind that the first match encountered will be used, and order your list of AddDescription directives accordingly.
This sets the icon to display next to a file ending in name for FancyIndexing. Icon is either a (%-escaped) relative URL to the icon, a fully qualified remote URL, or of the format (alttext,url) where alttext is the text tag given for an icon for non-graphical browsers.
This sets the icon to display next to files with FancyIndexing. Icon is either a (%-escaped) relative URL to the icon, a fully qualified remote URL, or of the format (alttext,url) where alttext is the text tag given for an icon for non-graphical browsers.
760c119bf3