图标栏和社会媒体图标-大学传播和营销-火狐体育
Montclair State University Campus aerial view.

图标栏和社交媒体图标

图标栏短代码用于显示一行最多五个图标:

  • 在桌面视图中不会占用页面的全部宽度
  • 在移动设备中保持一行

为什么最多只有5个图标?记住,当你建立一个响应式网站时,你必须把手机用户放在心上。如果我们把可点击的项目(如图标和链接)做得太小,手机用户就很难点击它们而不误碰到错误的图标。

构建图标栏元素相对简单。首先,创建图标栏短代码,然后在其中放置图像并添加到图像的链接。记住,当你链接到另一个网站时,你应该总是让这个链接在一个新的窗口或标签中打开。

例子

Twitter logo facebook logo Youtube logo

属性

图标栏没有属性。

代码示例

[iconbar]<a rel="noopener noreferrer" href="/wp-content/uploads/sites/144/2024/12/ Twitter -smaller.svg" target="_blank"><img src="/university-communications/wp-content/uploads/sites/144/2024/12/twitter-smaller.svg" alt="Twitter logo"></a><a rel="noopener noreferrer" href="/wp-content/uploads/sites/144/2024/12/facebook-smaller.svg" target="_blank"><img src=“/university-communications/wp-content/uploads/sites/144/2024/12/facebook-smaller.svg”alt="facebook logo"></a><a rel="noopener noreferrer" href="/wp-content/uploads/sites/144/2024/12/ Youtube -smaller.svg" target="_blank"><img src="/university-communications/wp-content/uploads/sites/144/2024/12/youtube-smaller.svg" alt="Youtube logo"></a>[/iconbar]

图标的使用

为了在整个网站上保持一致的外观,并确保您的网站在所有设备上都能正确显示,请使用以下图标: