arcgis api for js 按钮样式大全
4.25版本的有187个图标
https://developers.arcgis.com/javascript/latest/esri-icon-font/
用法示例
<div
id="select-by-rectangle"
class="esri-widget esri-widget--button esri-widget esri-interactive"
title="矩形框选"
>
<span class="esri-icon-checkbox-unchecked"></span>
</div>
view.ui.add("select-by-rectangle", "top-left");
const selectButton = document.getElementById("select-by-rectangle");
selectButton.addEventListener("click", () => {
view.popup.close();
sketchViewModel.create("rectangle");
...
});
ARCGIS API 所有按钮图标样式 - 点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>ARCGIS API 所有按钮图标样式</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css" />
<style>
button {
font-size: 16px;
background-color: transparent;
border: 1px solid #D3D3D3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
button:hover,
button:focus {
background: #0079c1;
color: #e4e4e4;
}
</style>
</head>
<body>
<div>
<button class="esri-icon-close" type="button" title="esri-icon-close"></button>
<button class="esri-icon-drag-horizontal" type="button" title="esri-icon-drag-horizontal"></button>
<button class="esri-icon-drag-vertical" type="button" title="esri-icon-drag-vertical"></button>
<button class="esri-icon-handle-horizontal" type="button" title="esri-icon-handle-horizontal"></button>
<button class="esri-icon-handle-vertical" type="button" title="esri-icon-handle-vertical"></button>
<button class="esri-icon-check-mark" type="button" title="esri-icon-check-mark"></button>
<button class="esri-icon-left-triangle-arrow" type="button" title="esri-icon-left-triangle-arrow"></button>
<button class="esri-icon-right-triangle-arrow" type="button" title="esri-icon-right-triangle-arrow"></button>
<button class="esri-icon-down-arrow" type="button" title="esri-icon-down-arrow"></button>
<button class="esri-icon-up-arrow" type="button" title="esri-icon-up-arrow"></button>
<button class="esri-icon-overview-arrow-bottom-left" type="button"
title="esri-icon-overview-arrow-bottom-left"></button>
<button class="esri-icon-overview-arrow-bottom-right" type="button"
title="esri-icon-overview-arrow-bottom-right"></button>
<button class="esri-icon-overview-arrow-top-left" type="button"
title="esri-icon-overview-arrow-top-left"></button>
<button class="esri-icon-overview-arrow-top-right" type="button"
title="esri-icon-overview-arrow-top-right"></button>
<button class="esri-icon-maximize" type="button" title="esri-icon-maximize"></button>
<button class="esri-icon-minimize" type="button" title="esri-icon-minimize"></button>
<button class="esri-icon-checkbox-unchecked" type="button" title="esri-icon-checkbox-unchecked"></button>
<button class="esri-icon-checkbox-checked" type="button" title="esri-icon-checkbox-checked"></button>
<button class="esri-icon-radio-unchecked" type="button" title="esri-icon-radio-unchecked"></button>
<button class="esri-icon-radio-checked" type="button" title="esri-icon-radio-checked"></button>
<button class="esri-icon-up-arrow-circled" type="button" title="esri-icon-up-arrow-circled"></button>
<button class="esri-icon-down-arrow-circled" type="button" title="esri-icon-down-arrow-circled"></button>
<button class="esri-icon-left-arrow-circled" type="button" title="esri-icon-left-arrow-circled"></button>
<button class="esri-icon-right-arrow-circled" type="button" title="esri-icon-right-arrow-circled"></button>
<button class="esri-icon-zoom-out-fixed" type="button" title="esri-icon-zoom-out-fixed"></button>
<button class="esri-icon-zoom-in-fixed" type="button" title="esri-icon-zoom-in-fixed"></button>
<button class="esri-icon-refresh" type="button" title="esri-icon-refresh"></button>
<button class="esri-icon-edit" type="button" title="esri-icon-edit"></button>
<button class="esri-icon-authorize" type="button" title="esri-icon-authorize"></button>
<button class="esri-icon-map-pin" type="button" title="esri-icon-map-pin"></button>
<button class="esri-icon-blank-map-pin" type="button" title="esri-icon-blank-map-pin"></button>
<button class="esri-icon-table" type="button" title="esri-icon-table"></button>
<button class="esri-icon-plus" type="button" title="esri-icon-plus"></button>
<button class="esri-icon-minus" type="button" title="esri-icon-minus"></button>
<button class="esri-icon-beginning" type="button" title="esri-icon-beginning"></button>
<button class="esri-icon-reverse" type="button" title="esri-icon-reverse"></button>
<button class="esri-icon-pause" type="button" title="esri-icon-pause"></button>
<button class="esri-icon-play" type="button" title="esri-icon-play"></button>
<button class="esri-icon-forward" type="button" title="esri-icon-forward"></button>
<button class="esri-icon-end" type="button" title="esri-icon-end"></button>
<button class="esri-icon-erase" type="button" title="esri-icon-erase"></button>
<button class="esri-icon-up-down-arrows" type="button" title="esri-icon-up-down-arrows"></button>
<button class="esri-icon-left" type="button" title="esri-icon-left"></button>
<button class="esri-icon-right" type="button" title="esri-icon-right"></button>
<button class="esri-icon-announcement" type="button" title="esri-icon-announcement"></button>
<button class="esri-icon-notice-round" type="button" title="esri-icon-notice-round"></button>
<button class="esri-icon-notice-triangle" type="button" title="esri-icon-notice-triangle"></button>
<button class="esri-icon-home" type="button" title="esri-icon-home"></button>
<button class="esri-icon-locate" type="button" title="esri-icon-locate"></button>
<button class="esri-icon-expand" type="button" title="esri-icon-expand"></button>
<button class="esri-icon-collapse" type="button" title="esri-icon-collapse"></button>
<button class="esri-icon-layer-list" type="button" title="esri-icon-layer-list"></button>
<button class="esri-icon-basemap" type="button" title="esri-icon-basemap"></button>
<button class="esri-icon-globe" type="button" title="esri-icon-globe"></button>
<button class="esri-icon-applications" type="button" title="esri-icon-applications"></button>
<button class="esri-icon-arrow-up-circled" type="button" title="esri-icon-arrow-up-circled"></button>
<button class="esri-icon-arrow-down-circled" type="button" title="esri-icon-arrow-down-circled"></button>
<button class="esri-icon-arrow-left-circled" type="button" title="esri-icon-arrow-left-circled"></button>
<button class="esri-icon-arrow-right-circled" type="button" title="esri-icon-arrow-right-circled"></button>
<button class="esri-icon-minus-circled" type="button" title="esri-icon-minus-circled"></button>
<button class="esri-icon-plus-circled" type="button" title="esri-icon-plus-circled"></button>
<button class="esri-icon-add-attachment" type="button" title="esri-icon-add-attachment"></button>
<button class="esri-icon-attachment" type="button" title="esri-icon-attachment"></button>
<button class="esri-icon-calendar" type="button" title="esri-icon-calendar"></button>
<button class="esri-icon-close-circled" type="button" title="esri-icon-close-circled"></button>
<button class="esri-icon-browser" type="button" title="esri-icon-browser"></button>
<button class="esri-icon-collection" type="button" title="esri-icon-collection"></button>
<button class="esri-icon-comment" type="button" title="esri-icon-comment"></button>
<button class="esri-icon-configure-popup" type="button" title="esri-icon-configure-popup"></button>
<button class="esri-icon-contact" type="button" title="esri-icon-contact"></button>
<button class="esri-icon-dashboard" type="button" title="esri-icon-dashboard"></button>
<button class="esri-icon-deny" type="button" title="esri-icon-deny"></button>
<button class="esri-icon-description" type="button" title="esri-icon-description"></button>
<button class="esri-icon-directions" type="button" title="esri-icon-directions"></button>
<button class="esri-icon-directions2" type="button" title="esri-icon-directions2"></button>
<button class="esri-icon-documentation" type="button" title="esri-icon-documentation"></button>
<button class="esri-icon-duplicate" type="button" title="esri-icon-duplicate"></button>
<button class="esri-icon-review" type="button" title="esri-icon-review"></button>
<button class="esri-icon-environment-settings" type="button" title="esri-icon-environment-settings"></button>
<button class="esri-icon-error" type="button" title="esri-icon-error"></button>
<button class="esri-icon-error2" type="button" title="esri-icon-error2"></button>
<button class="esri-icon-experimental" type="button" title="esri-icon-experimental"></button>
<button class="esri-icon-feature-layer" type="button" title="esri-icon-feature-layer"></button>
<button class="esri-icon-filter" type="button" title="esri-icon-filter"></button>
<button class="esri-icon-grant" type="button" title="esri-icon-grant"></button>
<button class="esri-icon-group" type="button" title="esri-icon-group"></button>
<button class="esri-icon-key" type="button" title="esri-icon-key"></button>
<button class="esri-icon-labels" type="button" title="esri-icon-labels"></button>
<button class="esri-icon-tag" type="button" title="esri-icon-tag"></button>
<button class="esri-icon-layers" type="button" title="esri-icon-layers"></button>
<button class="esri-icon-left-arrow" type="button" title="esri-icon-left-arrow"></button>
<button class="esri-icon-right-arrow" type="button" title="esri-icon-right-arrow"></button>
<button class="esri-icon-link-external" type="button" title="esri-icon-link-external"></button>
<button class="esri-icon-link" type="button" title="esri-icon-link"></button>
<button class="esri-icon-loading-indicator" type="button" title="esri-icon-loading-indicator"></button>
<button class="esri-icon-maps" type="button" title="esri-icon-maps"></button>
<button class="esri-icon-marketplace" type="button" title="esri-icon-marketplace"></button>
<button class="esri-icon-media" type="button" title="esri-icon-media"></button>
<button class="esri-icon-media2" type="button" title="esri-icon-media2"></button>
<button class="esri-icon-menu" type="button" title="esri-icon-menu"></button>
<button class="esri-icon-mobile" type="button" title="esri-icon-mobile"></button>
<button class="esri-icon-phone" type="button" title="esri-icon-phone"></button>
<button class="esri-icon-navigation" type="button" title="esri-icon-navigation"></button>
<button class="esri-icon-pan" type="button" title="esri-icon-pan"></button>
<button class="esri-icon-printer" type="button" title="esri-icon-printer"></button>
<button class="esri-icon-pie-chart" type="button" title="esri-icon-pie-chart"></button>
<button class="esri-icon-chart" type="button" title="esri-icon-chart"></button>
<button class="esri-icon-line-chart" type="button" title="esri-icon-line-chart"></button>
<button class="esri-icon-question" type="button" title="esri-icon-question"></button>
<button class="esri-icon-resend-invitation" type="button" title="esri-icon-resend-invitation"></button>
<button class="esri-icon-rotate" type="button" title="esri-icon-rotate"></button>
<button class="esri-icon-save" type="button" title="esri-icon-save"></button>
<button class="esri-icon-settings" type="button" title="esri-icon-settings"></button>
<button class="esri-icon-settings2" type="button" title="esri-icon-settings2"></button>
<button class="esri-icon-share" type="button" title="esri-icon-share"></button>
<button class="esri-icon-sign-out" type="button" title="esri-icon-sign-out"></button>
<button class="esri-icon-support" type="button" title="esri-icon-support"></button>
<button class="esri-icon-user" type="button" title="esri-icon-user"></button>
<button class="esri-icon-time-clock" type="button" title="esri-icon-time-clock"></button>
<button class="esri-icon-trash" type="button" title="esri-icon-trash"></button>
<button class="esri-icon-upload" type="button" title="esri-icon-upload"></button>
<button class="esri-icon-download" type="button" title="esri-icon-download"></button>
<button class="esri-icon-zoom-in-magnifying-glass" type="button"
title="esri-icon-zoom-in-magnifying-glass"></button>
<button class="esri-icon-search" type="button" title="esri-icon-search"></button>
<button class="esri-icon-zoom-out-magnifying-glass" type="button"
title="esri-icon-zoom-out-magnifying-glass"></button>
<button class="esri-icon-locked" type="button" title="esri-icon-locked"></button>
<button class="esri-icon-unlocked" type="button" title="esri-icon-unlocked"></button>
<button class="esri-icon-favorites" type="button" title="esri-icon-favorites"></button>
<button class="esri-icon-compass" type="button" title="esri-icon-compass"></button>
<button class="esri-icon-down" type="button" title="esri-icon-down"></button>
<button class="esri-icon-up" type="button" title="esri-icon-up"></button>
<button class="esri-icon-chat" type="button" title="esri-icon-chat"></button>
<button class="esri-icon-dock-bottom" type="button" title="esri-icon-dock-bottom"></button>
<button class="esri-icon-dock-left" type="button" title="esri-icon-dock-left"></button>
<button class="esri-icon-dock-right" type="button" title="esri-icon-dock-right"></button>
<button class="esri-icon-organization" type="button" title="esri-icon-organization"></button>
<button class="esri-icon-north-navigation" type="button" title="esri-icon-north-navigation"></button>
<button class="esri-icon-locate-circled" type="button" title="esri-icon-locate-circled"></button>
<button class="esri-icon-dial" type="button" title="esri-icon-dial"></button>
<button class="esri-icon-polygon" type="button" title="esri-icon-polygon"></button>
<button class="esri-icon-polyline" type="button" title="esri-icon-polyline"></button>
<button class="esri-icon-visible" type="button" title="esri-icon-visible"></button>
<button class="esri-icon-non-visible" type="button" title="esri-icon-non-visible"></button>
<button class="esri-icon-link-vertical" type="button" title="esri-icon-link-vertical"></button>
<button class="esri-icon-unlocked-link-vertical" type="button"
title="esri-icon-unlocked-link-vertical"></button>
<button class="esri-icon-link-horizontal" type="button" title="esri-icon-link-horizontal"></button>
<button class="esri-icon-unlocked-link-horizontal" type="button"
title="esri-icon-unlocked-link-horizontal"></button>
<button class="esri-icon-swap" type="button" title="esri-icon-swap"></button>
<button class="esri-icon-cta-link-external" type="button" title="esri-icon-cta-link-external"></button>
<button class="esri-icon-reply" type="button" title="esri-icon-reply"></button>
<button class="esri-icon-public" type="button" title="esri-icon-public"></button>
<button class="esri-icon-share2" type="button" title="esri-icon-share2"></button>
<button class="esri-icon-launch-link-external" type="button" title="esri-icon-launch-link-external"></button>
<button class="esri-icon-rotate-back" type="button" title="esri-icon-rotate-back"></button>
<button class="esri-icon-pan2" type="button" title="esri-icon-pan2"></button>
<button class="esri-icon-tracking" type="button" title="esri-icon-tracking"></button>
<button class="esri-icon-expand2" type="button" title="esri-icon-expand2"></button>
<button class="esri-icon-arrow-down" type="button" title="esri-icon-arrow-down"></button>
<button class="esri-icon-arrow-up" type="button" title="esri-icon-arrow-up"></button>
<button class="esri-icon-hollow-eye" type="button" title="esri-icon-hollow-eye"></button>
<button class="esri-icon-play-circled" type="button" title="esri-icon-play-circled"></button>
<button class="esri-icon-volume-off" type="button" title="esri-icon-volume-off"></button>
<button class="esri-icon-volume-on" type="button" title="esri-icon-volume-on"></button>
<button class="esri-icon-bookmark" type="button" title="esri-icon-bookmark"></button>
<button class="esri-icon-lightbulb" type="button" title="esri-icon-lightbulb"></button>
<button class="esri-icon-sketch-rectangle" type="button" title="esri-icon-sketch-rectangle"></button>
<button class="esri-icon-north-navigation-filled" type="button"
title="esri-icon-north-navigation-filled"></button>
<button class="esri-icon-default-action" type="button" title="esri-icon-default-action"></button>
<button class="esri-icon-undo" type="button" title="esri-icon-undo"></button>
<button class="esri-icon-redo" type="button" title="esri-icon-redo"></button>
<button class="esri-icon-cursor" type="button" title="esri-icon-cursor"></button>
<button class="esri-icon-cursor-filled" type="button" title="esri-icon-cursor-filled"></button>
<button class="esri-icon-measure" type="button" title="esri-icon-measure"></button>
<button class="esri-icon-measure-line" type="button" title="esri-icon-measure-line"></button>
<button class="esri-icon-measure-area" type="button" title="esri-icon-measure-area"></button>
<button class="esri-icon-legend" type="button" title="esri-icon-legend"></button>
<button class="esri-icon-sliders" type="button" title="esri-icon-sliders"></button>
<button class="esri-icon-sliders-horizontal" type="button" title="esri-icon-sliders-horizontal"></button>
<button class="esri-icon-cursor-marquee" type="button" title="esri-icon-cursor-marquee"></button>
<button class="esri-icon-lasso" type="button" title="esri-icon-lasso"></button>
<button class="esri-icon-elevation-profile" type="button" title="esri-icon-elevation-profile"></button>
<button class="esri-icon-slice" type="button" title="esri-icon-slice"></button>
<button class="esri-icon-line-of-sight" type="button" title="esri-icon-line-of-sight"></button>
<button class="esri-icon-zoom-to-object" type="button" title="esri-icon-zoom-to-object"></button>
<button class="esri-icon-urban-model" type="button" title="esri-icon-urban-model"></button>
<button class="esri-icon-measure-building-height-shadow" type="button"
title="esri-icon-measure-building-height-shadow"></button>
<button class="esri-icon-partly-cloudy" type="button" title="esri-icon-partly-cloudy"></button>
</div>
</body>
