Главная » Языки программирования

Html i element icon

Содержание
  1. Html i element icon
  2. Icons Tutorial
  3. Font Awesome 5 Icons
  4. Example
  5. Font Awesome 4 Icons
  6. Example
  7. Bootstrap 3 Icons
  8. Example
  9. Google Icons
  10. Example
  11. Icons
  12. Icons in DevExtreme UI Components
  13. Icons in Other HTML Elements
  14. Customize Icons
  15. Custom Images as Icons
  16. External Icon Libraries
  17. SVG Icons

Html i element icon

  • CSS Text Formatting
  • CSS text-align-last Property
  • CSS text-decoration Property
  • CSS text-decoration-color Property
  • CSS text-decoration-line Property
  • CSS text-decoration-style Property
  • CSS text-indent Property
  • CSS text-justify Property
  • CSS text-overflow Property
  • CSS text-transform Property
  • CSS text-shadow Property
  • CSS letter-spacing Property
  • CSS line-height Property
  • CSS direction Property
  • CSS word-spacing Property
  • CSS Grid Layout Module
  • CSS column-gap Property
  • CSS gap Property
  • CSS grid Property
  • CSS grid-area Property
  • CSS grid-auto-columns Property
  • CSS grid-auto-flow Property
  • CSS grid-auto-rows Property
  • CSS grid-column Property
  • CSS grid-column-end Property
  • CSS grid-column-gap Property
  • CSS grid-column-start Property
  • CSS grid-gap Property
  • CSS grid-row Property
  • CSS grid-row-end Property
  • CSS grid-row-gap Property
  • CSS grid-row-start Property
  • CSS grid-template Property
  • CSS grid-template-areas Property
  • CSS grid-template-columns Property
  • CSS grid-template-rows Property
  • Write an Interview Experience
  • Share Your Campus Experience
  • CSS Tutorial
  • CSS Introduction
  • CSS Syntax
  • CSS Comments
  • CSS Colors
  • CSS Borders
  • CSS Margins and Padding
  • CSS Height and Width
  • CSS Outline
  • CSS Fonts
  • CSS Icons
  • CSS Links
  • CSS Lists
  • CSS Tables
  • CSS Display property
  • CSS max-width Property
  • CSS Positioning Elements
  • CSS z-index Property
  • CSS Overflow
  • CSS Float
  • CSS Align
  • CSS Combinators
  • CSS Pseudo-classes
  • CSS Pseudo Elements
  • CSS Opacity / Transparency
  • CSS DropDowns
  • CSS Image Gallery
  • CSS Image Sprites
  • CSS Attribute Selector
  • CSS Counters
  • CSS Website Layout
  • CSS Units
  • CSS | Specificity
  • How to apply !important in CSS?
  • CSS Text Formatting
  • CSS text-align-last Property
  • CSS text-decoration Property
  • CSS text-decoration-color Property
  • CSS text-decoration-line Property
  • CSS text-decoration-style Property
  • CSS text-indent Property
  • CSS text-justify Property
  • CSS text-overflow Property
  • CSS text-transform Property
  • CSS text-shadow Property
  • CSS letter-spacing Property
  • CSS line-height Property
  • CSS direction Property
  • CSS word-spacing Property
  • CSS Grid Layout Module
  • CSS column-gap Property
  • CSS gap Property
  • CSS grid Property
  • CSS grid-area Property
  • CSS grid-auto-columns Property
  • CSS grid-auto-flow Property
  • CSS grid-auto-rows Property
  • CSS grid-column Property
  • CSS grid-column-end Property
  • CSS grid-column-gap Property
  • CSS grid-column-start Property
  • CSS grid-gap Property
  • CSS grid-row Property
  • CSS grid-row-end Property
  • CSS grid-row-gap Property
  • CSS grid-row-start Property
  • CSS grid-template Property
  • CSS grid-template-areas Property
  • CSS grid-template-columns Property
  • CSS grid-template-rows Property
Читайте также:  Com forums thread html

Источник

Icons Tutorial

To insert an icon, add the name of the icon class to any inline HTML element.

The and elements are widely used to add icons.

All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)

Font Awesome 5 Icons

To use the Free Font Awesome 5 icons, go to fontawesome.com and sign in to get a code to use in your web pages.

Read more about how to get started with Font Awesome in our Font Awesome 5 chapter.

Note: No downloading or installation is required!

Example

Font Awesome 4 Icons

To use the Font Awesome 4 icons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

Bootstrap 3 Icons

To use the Bootstrap 3 glyphicons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

Note: Glyphicons are not supported in Bootstrap 4.

For more information about Bootstrap 3 and Glyphicons, visit our Bootstrap 3 Tutorial.

Google Icons

To use the Google icons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

cloud
favorite
attachment
computer
traffic

For a complete list of ALL icons (font awesome, bootstrap and google), visit the Icon Reference.

Источник

Icons

DevExtreme includes an icon library with SVG and font icons for all DevExtreme themes. You can use an icon in UI components and in other page elements as is or customize it.

The following icons are available:

Icons in DevExtreme UI Components

Icons can be used in those UI components that have an icon property. For instance, the Button UI component has this property on the first level of the configuration object. Icons in the following code samples are taken from the built-in icon library.

jQuery
Angular
import < DxButtonModule >from "devextreme-angular"; // . export class AppComponent < // . >@NgModule(< imports: [ // . DxButtonModule ], // . >)
Vue
React
import React from 'react'; import < Button >from 'devextreme-react/button'; class App extends React.Component < render() < return ( ); > > export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().Button() .Icon("save") .Text("Save") )

Many default templates provide the icon property as well, the ContextMenu UI component’s default item template being an example:

jQuery
Angular
import < DxContextMenuModule >from "devextreme-angular"; // . export class AppComponent < // . >@NgModule(< imports: [ // . DxContextMenuModule ], // . >)
Vue
React
import React from 'react'; import < ContextMenu, Item >from 'devextreme-react/context-menu'; class App extends React.Component < render() < return (     ); > > export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().ContextMenu() .Items(i => < i.Add().Text("Zoom In").Icon("plus"); i.Add().Text("Share").Icon("message"); i.Add().Text("Download").Icon("download"); >) )

To find a list of UI components that support icons, search for «icon» in the left-hand menu.

Icons in Other HTML Elements

If an HTML element should display a DevExtreme icon, add a dx-icon-IconName class to it. We recommend using inline HTML elements ( or ).

You can find icon names in the Built-In Icon Library article.

Customize Icons

Since DevExtreme icons are shipped as an icon font, they can be customized with the same CSS properties that you would use to customize textual content: color , font-size , font-weight , text-align , etc. This is true for icons used in UI components.

jQuery
Angular
import < DxButtonModule >from "devextreme-angular"; // . export class AppComponent < // . >@NgModule(< imports: [ // . DxButtonModule ], // . >)
Vue
   #saveButton .dx-icon
React
import React from 'react'; import < Button >from 'devextreme-react/button'; class App extends React.Component < render() < return ( ); > > export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().Button() .ID("saveButton") .Icon("save") .Text("Save") )

. and for icons used in any other HTML elements:

dx-icon is a CSS class added to icon elements when DevExtreme UI components render them into the DOM. You cannot use another name for it. However, it is not true for icons in other HTML elements. You can use any name for the class in this case, as demonstrated in the previous example.

Custom Images as Icons

The UI component’s icon property accepts URLs, so you can assign the image’s URL to it. However, it is better to encode the image in the Base64 type instead to reduce the amount of transferred data. Search for an image to Base64 converter on the web.

Although Base64 code can be assigned directly to the icon property, we recommend placing it in the CSS because of its length. Add the following CSS rule to your stylesheet:

In addition, you can provide a specific icon variant for different states of a UI component element. In the following code, a special icon is provided for selected tabs:

.dx-tab-selected .dx-icon-customicon < background-image: url(data:image/png;base64. LONG BASE64 CODE GOES HERE . ); background-repeat: no-repeat; background-position: 0px 0px; >

Classes like dx-tab-selected from the previous example are not documented. Inspect CSS rules to find out which classes are added to the UI component element you are customizing.

External Icon Libraries

Icons in UI components are inserted into the DOM as elements. When you set a UI component’s icon property, its value is used to form the class attribute of the element. For instance, the code below .

. renders into the DOM as follows:

This allows DevExtreme UI components to support icons from external icon libraries, provided that they too should be specified in the class attribute.

Font Awesome, Glyphicons, and Ionicons are examples of such libraries. Follow the installation tutorial for the library you want to use and set the icon property as follows:

jQuery
Angular
 icon="fa fa-home" icon="glyphicon glyphicon-home" icon="icon ion-md-home">
Vue
  icon="fa fa-home" icon="glyphicon glyphicon-home" icon="icon ion-md-home" />
React
import React from 'react'; import < Button >from 'devextreme-react/button'; class App extends React.Component < render() < return ( ); > > export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().Button() .Icon("fas fa-home") // Font Awesome 5 .Icon("fa fa-home") // Font Awesome 4 .Icon("glyphicon glyphicon-home") // Glyphicons .Icon("icon ion-md-home") // Ionicons )

SVG Icons

In addition to font icons, DevExtreme supplies the same icons in the SVG format. You can find SVG icons in the DevExtreme repository on GitHub.

The following code uses SVG icons in the Button UI component. The same technique can be used with any other UI component that has the icon property.

new DevExpress.ui.dxButton(targetElement, < icon: "https://path/to/the/icon.svg" >);
new DevExpress.ui.dxButton(targetElement, < icon: "SVG_CONTENT" >);
import * as myIcon from "./assets/icon.svg"; new DevExpress.ui.dxButton(targetElement, < icon: myIcon >);

The SVG format allows running executable code that might be malicious. We strongly recommend that you use SVG icons only from trusted sources.

Источник

Оцените статью
© 2024 Программирование