Difference between revisions of "Templates download/Icon"

Tag: 2017 source edit
 
Line 28: Line 28:
 
#'''Vertical alignment:''' It should not be necessary to provide an alignment value. The standard is set to text-top and usually works in headings and in flow-text. If it looks a little off, you can try other vertical-alignment values, such as text-bottom. For a full list of possible values, see https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
 
#'''Vertical alignment:''' It should not be necessary to provide an alignment value. The standard is set to text-top and usually works in headings and in flow-text. If it looks a little off, you can try other vertical-alignment values, such as text-bottom. For a full list of possible values, see https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
 
#'''Click''' ''Apply changes''.
 
#'''Click''' ''Apply changes''.
==Activate notifications==
+
 
Users can activate notifications for mentions in their [[Manual:Preferences|personal preferences]]:
+
 
#'''Select''' the tab ''Notifications''.
+
The icon is now displayed on the page.
#'''Activate''' the notifications options for mentions.
+
 
#'''Save''' your changes.  [[File:HW-mention-notificationsettings.png|center|thumb|680x680px|Activating notifications|link=Special:FilePath/HW-mention-notificationsettings.png]]
+
[[File:bootstrap-icon-on page.png|alt=Inserted Bootstrap icon|center|thumb|450x450px|Inserted Bootstrap icon]]

Latest revision as of 17:29, 6 April 2022

This template makes it possible to insert Bootstrap icons on a page.

Importing the template

The import file is included in the archive file HW-Icon.zip. Unpack the zip file first.

On the page Special:Import, follow these steps:

  1. Select file and choose HW-Icon.xml.
  2. Enter an interwiki prefix. Since this field is required, simply add hw (for hallowelt).
  3. Keep the selection Import to default locations.
  4. Click Upload file... .

The template is now available in your wiki.

Pages included in the import

The xml import creates the following file in your wiki:

  • Template:Icon

Using the template

  1. Find a bootstrap icon from the Bootstrap website at https://icons.getbootstrap.com/
  2. Click on the icon you would like to use. The icon page shows you the class-name of the icon on the right side of the page:
    Bootstrap icon css-class
    Bootstrap icon css-class
  3. Highlight the class name (it has the format bi bi-myicon) and copy it to your clipboard (ctrl+c).
  4. Go back to your wiki page.
  5. Enter {{ in visual editing mode at the cursor position where you want to insert the icon. The template editor opens.
  6. Copy the icon class from your clipboard:
    Template editor
    Template editor
  7. Change the font size (optional) if you want the size to be different from the text surrounding it (e.g., from the size of a heading if the icon is placed in the heading or of the paragraph text if the icon is placed in the flow-text. Smaller than text icons are usually sized no smaller than 0.85em and larger icons up to 2.5em.
  8. Color: If you want the color to be different from the surrounding text, you can specify any web color (e.g., a color name like blue or a hex-valuesuch as #0059b3 for a more specific blue). A list of web colors can be found at https://www.w3schools.com/colors/colors_picker.asp
  9. Vertical alignment: It should not be necessary to provide an alignment value. The standard is set to text-top and usually works in headings and in flow-text. If it looks a little off, you can try other vertical-alignment values, such as text-bottom. For a full list of possible values, see https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
  10. Click Apply changes.


The icon is now displayed on the page.

Inserted Bootstrap icon
Inserted Bootstrap icon
No categories assignedEdit

Discussions

Attachments